CAAnimation — nyckelbegrepp, CAAnimationGroup och lageranimationer

Vad är CAAnimation?

CAAnimation — abstrakt Core Animation-klass som definierar ett gemensamt gränssnitt för alla animationer. Den implementerar protokollet CAMediaTiming (tid, upprepning, automatisk återgång) och CAMediaTimingFillMode (beteende före/efter animation). CAAnimation kan inte instansieras direkt — använd en av underklasserna: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition eller CAAnimation (via animationForKeyPath).

Varje CAAnimation läggs till CALayer via metoden add(_:forKey:). Parametern forKey är en unik identifierare för animationen på lagret. Samma keyPath kan bara ha en aktiv animation. För att ersätta en animation, använd removeAnimation(forKey:) före tillägg av en ny.

Enligt Apple är CAAnimation en tillfällig ändring av lagret. Efter att animationen slutförts återgår presentation layer till model layer-värdena, om fillMode och isRemovedOnCompletion inte är inställda.

Klasshierarki för CAAnimation

Core Animation tillhandahåller fyra huvudunderklasser av CAAnimation, var och en för sitt eget animationsscenario. Att förstå hierarkin hjälper dig att välja rätt typ för uppgiften.

CABasicAnimation — den enklaste och mest populära underklassen. CAKeyframeAnimation används för komplexa banor (t.ex. rörelse längs en Bezier-kurva). CAAnimationGroup startar flera animationer parallellt. CATransition — en färdig övergång mellan bilder eller innehållstillstånd.

CAMediaTiming — tidsstyrning

Protokollet CAMediaTiming — en grundläggande del av CAAnimation. Den definierar de grundläggande tidsegenskaperna: duration (varaktighet), repeatCount (antal upprepningar), repeatDuration (total upprepningstid), autoreverses (återgång till början), beginTime (starttid i förhållande till förälder), timeOffset (förskjutning inom en cykel), speed (uppspelningshastighet).

Egenskapen fillMode (CAMediaTimingFillMode) bestämmer visningen av lagret före (backwards) och efter (forwards) animation. Värden: removed (standard — återgång till model layer), forwards (stannar i slutligt tillstånd), backwards (visar initialt tillstånd före start), both (kombinerar båda beteenden). fillMode fungerar endast med isRemovedOnCompletion = false.

CAAnimation ärver CAMediaTiming och kan kapslas i en förälderanimation (CAAnimationGroup). I detta fall beräknas beginTime i förhållande till förälderns start, och duration begränsas av föräldern. Speed = 2.0 dubblerar animationshastigheten.

CAAnimationGroup och CAKeyframeAnimation

CAAnimationGroup kombinerar flera CAAnimation-objekt i en grupp. Alla underordnade animationer startar parallellt om inte beginTime är inställt för varje. Gruppen har sin egen duration som begränsar den maximala varaktigheten för underordnade animationer. Gruppens timingFunction tillämpas som standardvärde om den underordnade animationen inte har angett sin egen.

CAKeyframeAnimation animerar en egenskap över flera nyckelbilder definierade av values-arrayen. Parametern keyTimes (en NSNumber-array från 0 till 1) bestämmer tidsstämplarna för varje bild. calculationMode specificerar interpolationen: linear, discrete (utan interpolation), paced (enhetlig hastighet), cubic (spline), cubicPaced.

import QuartzCore

// CAAnimationGroup — kombination av animationer
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 — rörelse längs bana
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 med anpassade värden
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 // relativt till aktuell position
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup utför fade, scale och rotate parallellt med duration 2.0. CAKeyframeAnimation med path och calculationMode = .cubicPaced ger enhetlig rörelse längs en Bezier-kurva med automatisk rotation (rotationMode = .auto). bounceAnimation använder isAdditive för relativ förskjutning.

Kodexempel i Swift

Fullständigt CAAnimation-exempel för komplex lageranimation med CATransition för innehållsbyte och CAAnimationGroup för pulsering.

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 — övergång mellan tillstånd
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Ändrar innehåll via transaktion
        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 med type: .fade skapar en mjuk övergång mellan två backgroundColor-tillstånd. CAAnimationGroup kombinerar scale, opacity och shadowOpacity för pulseffekten. removeAllAnimations() återställer alla animationer och återför lagret till model layers ursprungliga värden.