CAAnimation — Schlüsselkonzepte, CAAnimationGroup und Layer-Animationen

Was ist CAAnimation?

CAAnimation ist eine abstrakte Klasse von Core Animation, die die gemeinsame Schnittstelle für alle Animationen definiert. Sie implementiert das CAMediaTiming-Protokoll (Dauer, Wiederholung, Auto-Rücklauf) und CAMediaTimingFillMode (Verhalten vor/nach der Animation). CAAnimation kann nicht direkt instanziiert werden — verwenden Sie eine seiner Unterklassen: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition oder CAAnimation (über animationForKeyPath).

Jede CAAnimation wird einem CALayer über die Methode add(_:forKey:) hinzugefügt. Der Parameter forKey ist ein eindeutiger Animationsbezeichner auf dem Layer. Ein keyPath kann nur eine aktive Animation haben. Um eine Animation zu ersetzen, verwenden Sie removeAnimation(forKey:) vor dem Hinzufügen einer neuen.

Laut Apple ist CAAnimation eine "temporäre" Änderung des Layers. Nach Abschluss der Animation kehrt der Präsentations-Layer zu den Werten des Modell-Layers zurück, wenn fillMode und isRemovedOnCompletion nicht gesetzt sind.

CAAnimation Klassenhierarchie

Core Animation bietet vier Hauptunterklassen von CAAnimation, jede für ihr eigenes Animationsszenario. Das Verständnis der Hierarchie hilft, den richtigen Typ für die Aufgabe auszuwählen.

CABasicAnimation ist die einfachste und beliebteste Unterklasse. CAKeyframeAnimation wird für komplexe Bahnen (z. B. Bewegung entlang einer Bezier-Kurve) verwendet. CAAnimationGroup führt mehrere Animationen parallel aus. CATransition ist ein vorgefertigter Übergang zwischen Bildern oder Inhaltszuständen.

CAMediaTiming — Zeitverwaltung

Das CAMediaTiming-Protokoll ist ein grundlegender Bestandteil von CAAnimation. Es definiert die grundlegenden Zeiteigenschaften: duration, repeatCount, repeatDuration, autoreverses, beginTime (Startzeit relativ zum Elternteil), timeOffset (Versatz innerhalb eines Zyklus), speed (Wiedergabegeschwindigkeit).

Die Eigenschaft fillMode (CAMediaTimingFillMode) bestimmt die Layer-Anzeige vor (backwards) und nach (forwards) der Animation. Werte: removed (Standard — Rückkehr zum Modell-Layer), forwards (bleibt im Endzustand), backwards (zeigt den Anfangszustand vor dem Start), both (kombiniert beide Verhaltensweisen). fillMode funktioniert nur, wenn isRemovedOnCompletion = false ist.

CAAnimation erbt CAMediaTiming und kann in eine Eltern-Animation (CAAnimationGroup) eingebettet werden. In diesem Fall wird beginTime relativ zum Start des Elternteils berechnet und duration durch die Dauer des Elternteils begrenzt. Speed = 2.0 verdoppelt die Animationsgeschwindigkeit.

CAAnimationGroup und CAKeyframeAnimation

CAAnimationGroup fasst mehrere CAAnimation-Instanzen zu einer Gruppe zusammen. Alle untergeordneten Animationen starten parallel, es sei denn, beginTime wird für jede festgelegt. Die Gruppe hat eine eigene duration, die die maximale Dauer der untergeordneten Animationen begrenzt. Die timingFunction der Gruppe wird als Standardwert verwendet, wenn eine untergeordnete Animation keine eigene festlegt.

CAKeyframeAnimation animiert eine Eigenschaft über mehrere Keyframes, die durch ein Array von values definiert sind. Der Parameter keyTimes (Array von NSNumber von 0 bis 1) definiert die Zeitstempel für jeden Frame. calculationMode spezifiziert die Interpolation: linear, discrete (keine Interpolation), paced (gleichmäßige Geschwindigkeit), cubic (Spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — Animationskombination
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 — Bewegung entlang einer Bahn
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 mit benutzerdefinierten Werten
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 // relativ zur aktuellen Position
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup führt fade, scale und rotate parallel mit einer Dauer von 2.0 aus. CAKeyframeAnimation mit path und calculationMode = .cubicPaced sorgt für gleichmäßige Bewegung entlang einer Bezier-Kurve mit automatischer Rotation (rotationMode = .auto). bounceAnimation verwendet isAdditive für relativen Versatz.

Swift-Codebeispiele

Ein vollständiges CAAnimation-Beispiel für komplexe Layer-Animationen mit CATransition zum Inhaltswechsel und CAAnimationGroup für Pulseffekte.

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 — Übergang zwischen Zuständen
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Inhalt per Transaktion ändern
        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
    }
}

CATransition mit type: .fade erzeugt einen sanften Übergang zwischen zwei backgroundColor-Zuständen. CAAnimationGroup kombiniert scale, opacity und shadowOpacity für einen Pulseffekt. removeAllAnimations() bricht alle Animationen ab und setzt den Layer auf seine ursprünglichen Modell-Layer-Werte zurück.