CAAnimation — kulcsfogalmak, CAAnimationGroup és réteganimációk

Mi az a CAAnimation?

CAAnimation — absztrakt Core Animation osztály, amely közös interfészt definiál az összes animációhoz. Implementálja a CAMediaTiming protokollt (idő, ismétlés, automatikus visszafordulás) és a CAMediaTimingFillMode-ot (viselkedés animáció előtt/után). A CAAnimation nem példányosítható közvetlenül — használja az alábbi alosztályok egyikét: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition vagy CAAnimation (az animationForKeyPath-en keresztül).

Minden CAAnimation az add(_:forKey:) metódussal kerül hozzáadásra a CALayer-hez. A forKey paraméter az animáció egyedi azonosítója a rétegen. Ugyanaz a keyPath csak egy aktív animációval rendelkezhet. Az animáció cseréjéhez használja a removeAnimation(forKey:) metódust az új hozzáadása előtt.

Az Apple szerint a CAAnimation a réteg ideiglenes módosítása. Az animáció befejezése után a presentation layer visszatér a model layer értékeihez, ha a fillMode és az isRemovedOnCompletion nincs beállítva.

A CAAnimation osztályhierarchiája

A Core Animation négy fő alosztályt biztosít a CAAnimation számára, mindegyiket a saját animációs forgatókönyvéhez. A hierarchia megértése segít kiválasztani a megfelelő típust a feladathoz.

A CABasicAnimation a legegyszerűbb és legnépszerűbb alosztály. A CAKeyframeAnimation összetett pályákhoz használatos (pl. mozgás Bezier-görbe mentén). A CAAnimationGroup több animációt indít párhuzamosan. A CATransition egy kész átmenet képek vagy tartalomállapotok között.

CAMediaTiming — időkezelés

A CAMediaTiming protokoll a CAAnimation alapvető része. Meghatározza az alapvető időbeli tulajdonságokat: duration (időtartam), repeatCount (ismétlések száma), repeatDuration (ismétlések teljes időtartama), autoreverses (visszatérés a kezdethez), beginTime (kezdési idő a szülőhöz képest), timeOffset (eltolás egy cikluson belül), speed (lejátszási sebesség).

A fillMode tulajdonság (CAMediaTimingFillMode) meghatározza a réteg megjelenítését az animáció előtt (backwards) és után (forwards). Értékek: removed (alapértelmezett — visszatérés a model layer-hez), forwards (a végső állapotban marad), backwards (a kezdeti állapotot mutatja a kezdés előtt), both (mindkét viselkedést kombinálja). A fillMode csak akkor működik, ha isRemovedOnCompletion = false.

A CAAnimation örökli a CAMediaTiming-ot, és beágyazható egy szülő animációba (CAAnimationGroup). Ebben az esetben a beginTime a szülő kezdetéhez képest kerül kiszámításra, a duration pedig a szülő által korlátozott. A Speed = 2.0 kétszeresére gyorsítja az animációt.

CAAnimationGroup és CAKeyframeAnimation

A CAAnimationGroup több CAAnimation-t egyesít egy csoportba. Az összes gyermek animáció párhuzamosan indul, ha nincs beginTime beállítva mindegyikhez. A csoportnak saját duration-ja van, amely korlátozza a gyermek animációk maximális időtartamát. A csoport timingFunction-ja alapértelmezett értékként kerül alkalmazásra, ha a gyermek animáció nem állította be a sajátját.

A CAKeyframeAnimation egy tulajdonságot animál több kulcskockán keresztül, amelyeket a values tömb határoz meg. A keyTimes paraméter (NSNumber tömb 0-tól 1-ig) meghatározza az időbélyegeket minden kockához. A calculationMode meghatározza az interpolációt: linear, discrete (interpoláció nélkül), paced (egyenletes sebesség), cubic (spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — animációk kombinációja
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 — mozgás pálya mentén
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 egyedi értékekkel
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 // az aktuális pozícióhoz képest
    layer.add(bounce, forKey: nil)
}

A CAAnimationGroup párhuzamosan hajtja végre a fade, scale és rotate műveleteket duration 2.0-val. A CAKeyframeAnimation path és calculationMode = .cubicPaced paraméterekkel egyenletes mozgást biztosít a Bezier-görbe mentén automatikus forgatással (rotationMode = .auto). A bounceAnimation az isAdditive-t használja a relatív elmozduláshoz.

Kódpéldák Swift-ben

Teljes CAAnimation példa összetett réteganimációhoz CATransition használatával a tartalomváltáshoz és CAAnimationGroup a pulzáláshoz.

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 — átmenet állapotok között
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Tartalom módosítása tranzakcióval
        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
    }
}

A CATransition type: .fade paraméterrel sima átmenetet hoz létre két backgroundColor állapot között. A CAAnimationGroup egyesíti a scale, opacity és shadowOpacity tulajdonságokat a pulzáló hatás érdekében. A removeAllAnimations() visszaállítja az összes animációt és visszahelyezi a réteget a model layer eredeti értékeire.