CAAnimation — kernconcepten, CAAnimationGroup en laaganimaties

Wat is CAAnimation?

CAAnimation — abstracte Core Animation-klasse die de gemeenschappelijke interface definieert voor alle animaties. Het implementeert het CAMediaTiming-protocol (tijd, herhaling, automatisch terugkeren) en CAMediaTimingFillMode (gedrag voor/na animatie). CAAnimation kan niet direct worden geïnstantieerd — gebruik een van de subklassen: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition of CAAnimation (via animationForKeyPath).

Elke CAAnimation wordt aan CALayer toegevoegd via de methode add(_:forKey:). De parameter forKey is een unieke identificatie van de animatie op de laag. Hetzelfde keyPath kan slechts één actieve animatie hebben. Gebruik removeAnimation(forKey:) voordat u een nieuwe toevoegt om een animatie te vervangen.

Volgens Apple is CAAnimation een tijdelijke wijziging van de laag. Na voltooiing van de animatie keert presentation layer terug naar de waarden van model layer, tenzij fillMode en isRemovedOnCompletion zijn ingesteld.

Klassenhiërarchie van CAAnimation

Core Animation biedt vier hoofd-subklassen van CAAnimation, elk voor zijn eigen animatiescenario. Inzicht in de hiërarchie helpt bij het kiezen van het juiste type voor de taak.

CABasicAnimation is de eenvoudigste en populairste subklasse. CAKeyframeAnimation wordt gebruikt voor complexe trajecten (bijv. beweging langs een Bezier-curve). CAAnimationGroup start meerdere animaties parallel. CATransition is een kant-en-klare overgang tussen afbeeldingen of inhoudstoestanden.

CAMediaTiming — tijdsbeheer

Het CAMediaTiming-protocol is een fundamenteel onderdeel van CAAnimation. Het definieert de basistijdseigenschappen: duration (duur), repeatCount (aantal herhalingen), repeatDuration (totale herhalingsduur), autoreverses (terugkeer naar begin), beginTime (starttijd ten opzichte van ouder), timeOffset (verschuiving binnen één cyclus), speed (afspeelsnelheid).

De eigenschap fillMode (CAMediaTimingFillMode) bepaalt de weergave van de laag vóór (backwards) en na (forwards) de animatie. Waarden: removed (standaard — terugkeer naar model layer), forwards (blijft in eindtoestand), backwards (toont begintoestand vóór start), both (combineert beide gedragingen). fillMode werkt alleen met isRemovedOnCompletion = false.

CAAnimation erft CAMediaTiming en kan worden genest in een bovenliggende animatie (CAAnimationGroup). In dit geval wordt beginTime berekend ten opzichte van het begin van de ouder, en wordt duration beperkt door de ouder. Speed = 2.0 versnelt de animatie tweemaal.

CAAnimationGroup en CAKeyframeAnimation

CAAnimationGroup combineert meerdere CAAnimation-objecten in één groep. Alle onderliggende animaties starten parallel, tenzij voor elk beginTime is ingesteld. De groep heeft een eigen duration die de maximale duur van onderliggende animaties beperkt. De timingFunction van de groep wordt als standaardwaarde toegepast als de onderliggende animatie geen eigen waarde heeft ingesteld.

CAKeyframeAnimation animeert een eigenschap over meerdere sleutelframes zoals gedefinieerd door de values-array. De parameter keyTimes (een NSNumber-array van 0 tot 1) bepaalt de tijdstempels voor elk frame. calculationMode specificeert de interpolatie: linear, discrete (zonder interpolatie), paced (uniforme snelheid), cubic (spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — combinatie van animaties
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 — beweging langs traject
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 met aangepaste waarden
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 // ten opzichte van huidige positie
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup voert fade, scale en rotate parallel uit met duration 2.0. CAKeyframeAnimation met path en calculationMode = .cubicPaced zorgt voor uniforme beweging langs een Bezier-curve met automatische rotatie (rotationMode = .auto). bounceAnimation gebruikt isAdditive voor relatieve verplaatsing.

Codevoorbeelden in Swift

Volledig CAAnimation-voorbeeld voor complexe laaganimatie met CATransition voor inhoudswisseling en CAAnimationGroup voor pulsatie.

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 — overgang tussen toestanden
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Inhoud wijzigen via transactie
        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 met type: .fade creëert een vloeiende overgang tussen twee backgroundColor-toestanden. CAAnimationGroup combineert scale, opacity en shadowOpacity voor het pulsatie-effect. removeAllAnimations() reset alle animaties en brengt de laag terug naar de oorspronkelijke waarden van model layer.