CAAnimation — Temel kavramlar, CAAnimationGroup ve katman animasyonları

CAAnimation nedir?

CAAnimation, tüm animasyonlar için ortak arayüzü tanımlayan Core Animation'ın soyut bir sınıfıdır. CAMediaTiming protokolünü (süre, tekrar, otomatik tersine çevirme) ve CAMediaTimingFillMode'u (animasyon öncesi/sonrası davranış) uygular. CAAnimation doğrudan oluşturulamaz — alt sınıflarından birini kullanın: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition veya CAAnimation (animationForKeyPath aracılığıyla).

Her CAAnimation, add(_:forKey:) yöntemiyle bir CALayer'a eklenir. forKey parametresi, katmandaki benzersiz animasyon tanımlayıcısıdır. Bir keyPath'te yalnızca bir etkin animasyon olabilir. Bir animasyonu değiştirmek için, yenisini eklemeden önce removeAnimation(forKey:) kullanın.

Apple'a göre CAAnimation, katmanda "geçici" bir değişikliktir. Animasyon tamamlandıktan sonra, fillMode ve isRemovedOnCompletion ayarlanmamışsa sunum katmanı model katman değerlerine döner.

CAAnimation sınıf hiyerarşisi

Core Animation, her biri kendi animasyon senaryosu için dört ana CAAnimation alt sınıfı sağlar. Hiyerarşiyi anlamak, görev için doğru türü seçmeye yardımcı olur.

CABasicAnimation en basit ve popüler alt sınıftır. CAKeyframeAnimation karmaşık yörüngeler için kullanılır (örneğin, Bezier eğrisi boyunca hareket). CAAnimationGroup birden çok animasyonu paralel olarak çalıştırır. CATransition, görüntüler veya içerik durumları arasında hazır bir geçiştir.

CAMediaTiming — zaman yönetimi

CAMediaTiming protokolü CAAnimation'ın temel bir parçasıdır. Temel zaman özelliklerini tanımlar: duration, repeatCount, repeatDuration, autoreverses, beginTime (üst öğeye göre başlangıç zamanı), timeOffset (bir döngü içindeki sapma), speed (oynatma hızı).

fillMode özelliği (CAMediaTimingFillMode), animasyondan önce (backwards) ve sonra (forwards) katman görüntülemesini belirler. Değerler: removed (varsayılan — model katmana döner), forwards (son durumda kalır), backwards (başlamadan önce ilk durumu gösterir), both (her iki davranışı birleştirir). fillMode yalnızca isRemovedOnCompletion = false olduğunda çalışır.

CAAnimation, CAMediaTiming'den miras alır ve bir üst animasyonun (CAAnimationGroup) içine yerleştirilebilir. Bu durumda beginTime, üst öğenin başlangıcına göre hesaplanır ve duration, üst öğenin süresiyle sınırlanır. Speed = 2.0 animasyon hızını iki katına çıkarır.

CAAnimationGroup ve CAKeyframeAnimation

CAAnimationGroup, birden çok CAAnimation örneğini tek bir grupta birleştirir. Her biri için beginTime ayarlanmadıkça tüm alt animasyonlar paralel olarak başlar. Grubun kendi duration'ı vardır ve bu, alt animasyonların maksimum süresini sınırlar. Grubun timingFunction'ı, bir alt animasyon kendisininkini ayarlamazsa varsayılan değer olarak kullanılır.

CAKeyframeAnimation, bir values dizisiyle tanımlanan birden çok anahtar kare üzerinde bir özelliği animasyon yapar. keyTimes parametresi (0'dan 1'e kadar NSNumber dizisi), her kare için zaman damgalarını tanımlar. calculationMode, enterpolasyonu belirtir: linear, discrete (enterpolasyon yok), paced (tek tip hız), cubic (spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — animasyon kombinasyonu
func complexLayerAnimation(_ layer: CALayer) {
    let fade = CABasicAnimation(keyPath: "opacity")
    fade.fromValue = 1.0
    fade.toValue = 0.3

    let scale = CABasicAnimation(keyPath: "transform.scale")
    scale.fromValue = 1.0
    scale.toValue = 1.5

    let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
    rotate.fromValue = 0
    rotate.toValue = Double.pi * 2

    let group = CAAnimationGroup()
    group.animations = [fade, scale, rotate]
    group.duration = 2.0
    group.repeatCount = .infinity
    group.autoreverses = true

    layer.add(group, forKey: "pulse")
}

// CAKeyframeAnimation — yörünge hareketi
func animateAlongPath(_ layer: CALayer) {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addCurve(
        to: CGPoint(x: 200, y: 300),
        controlPoint1: CGPoint(x: 100, y: 0),
        controlPoint2: CGPoint(x: 100, y: 300)
    )

    let anim = CAKeyframeAnimation(keyPath: "position")
    anim.path = path.cgPath
    anim.duration = 1.5
    anim.calculationMode = .cubicPaced
    anim.rotationMode = .auto
    anim.fillMode = .forwards
    anim.isRemovedOnCompletion = false

    layer.add(anim, forKey: "pathAnim")
    layer.position = CGPoint(x: 200, y: 300)
}

// CAKeyframeAnimation özel değerlerle
func bounceAnimation(_ layer: CALayer) {
    let bounce = CAKeyframeAnimation(keyPath: "position.y")
    bounce.values = [0, -50, 0, -25, 0, -10, 0]
    bounce.keyTimes = [0, 0.15, 0.3, 0.45, 0.6, 0.8, 1.0]
    bounce.duration = 0.8
    bounce.timingFunction = CAMediaTimingFunction(name: .easeOut)
    bounce.isAdditive = true // mevcut konuma göre
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup, 2.0 süreyle fade, scale ve rotate'u paralel olarak yürütür. path ve calculationMode = .cubicPaced ile CAKeyframeAnimation, otomatik dönüşle (rotationMode = .auto) Bezier eğrisi boyunca tek tip hareket sağlar. bounceAnimation, göreli sapma için isAdditive kullanır.

Swift kod örnekleri

İçerik değiştirme için CATransition ve nabız efektleri için CAAnimationGroup kullanan karmaşık katman animasyonu için tam bir CAAnimation örneği.

import UIKit
import QuartzCore

class AnimationDemoView: UIView {

    private let demoLayer = CALayer()
    private var currentColor: CGColor = UIColor.systemBlue.cgColor

    override func layoutSubviews() {
        super.layoutSubviews()
        demoLayer.frame = CGRect(x: bounds.midX - 40, y: bounds.midY - 40,
                                 width: 80, height: 80)
        demoLayer.backgroundColor = currentColor
        demoLayer.cornerRadius = 12
        layer.addSublayer(demoLayer)
    }

    func animateTransition() {
        // CATransition — durumlar arasında geçiş
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // İşlem yoluyla içerik değiştirme
        currentColor = currentColor == UIColor.systemBlue.cgColor
            ? UIColor.systemRed.cgColor
            : UIColor.systemBlue.cgColor
        demoLayer.backgroundColor = currentColor
    }

    func startPulse() {
        let scaleUp = CABasicAnimation(keyPath: "transform.scale")
        scaleUp.fromValue = 1.0
        scaleUp.toValue = 1.3

        let fadeOut = CABasicAnimation(keyPath: "opacity")
        fadeOut.fromValue = 1.0
        fadeOut.toValue = 0.6

        let glow = CABasicAnimation(keyPath: "shadowOpacity")
        glow.fromValue = 0.0
        glow.toValue = 0.8

        let group = CAAnimationGroup()
        group.animations = [scaleUp, fadeOut, glow]
        group.duration = 1.2
        group.autoreverses = true
        group.repeatCount = .infinity
        group.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

        demoLayer.add(group, forKey: "pulse")
    }

    func stopAnimations() {
        demoLayer.removeAllAnimations()
        demoLayer.transform = CATransform3DIdentity
        demoLayer.opacity = 1.0
        demoLayer.shadowOpacity = 0.0
    }
}

type: .fade ile CATransition, iki backgroundColor durumu arasında yumuşak bir geçiş oluşturur. CAAnimationGroup, nabız efekti için scale, opacity ve shadowOpacity'yi birleştirir. removeAllAnimations() tüm animasyonları iptal eder ve katmanı orijinal model katman değerlerine döndürür.