CAAnimation — klíčové pojmy, CAAnimationGroup a animace vrstev

Autor: IT Sectr Publikováno: 2026-03-01 Doba čtení: 8 min

CAAnimation — abstraktní základní třída Core Animation, která definuje společné rozhraní pro všechny typy animací: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition. Článek vysvětluje hierarchii tříd, klíčové vlastnosti, seskupování animací a praktické příklady ve Swiftu.

Hlavní

  • CAAnimation — abstraktní základní třída Core Animation, od které dědí CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition
  • CAAnimationGroup — paralelní provádění více animací se společným duration a timingFunction
  • CAKeyframeAnimation — animace po klíčových snímcích s poli hodnot a časových razítek
  • CAMediaTiming — protokol pro řízení času: duration, repeatCount, autoreverses, timeOffset
  • CATransition — předdefinované přechody mezi stavy vrstvy (fade, push, moveIn, reveal)

Co je CAAnimation?

CAAnimation — abstraktní třída Core Animation, která definuje společné rozhraní pro všechny animace. Implementuje protokol CAMediaTiming (čas, opakování, automatický návrat) a CAMediaTimingFillMode (chování před/po animaci). CAAnimation nelze přímo instanciovat — použijte jednu z podtříd: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition nebo CAAnimation (prostřednictvím animationForKeyPath).

Každá CAAnimation se přidává do CALayer pomocí metody add(_:forKey:). Parametr forKey je jedinečný identifikátor animace na vrstvě. Stejný keyPath může mít pouze jednu aktivní animaci. Pro nahrazení animace použijte removeAnimation(forKey:) před přidáním nové.

Podle Apple je CAAnimation dočasná změna vrstvy. Po dokončení animace se presentation layer vrátí k hodnotám model layer, pokud nejsou nastaveny fillMode a isRemovedOnCompletion.

Hierarchie tříd CAAnimation

Core Animation poskytuje čtyři hlavní podtřídy CAAnimation, každou pro svůj vlastní scénář animace. Porozumění hierarchii pomáhá vybrat správný typ pro úlohu.

TřídaÚčelKlíčové vlastnosti
CABasicAnimationAnimace jedné vlastnosti z A do BfromValue, toValue, byValue, keyPath
CAKeyframeAnimationAnimace po více klíčových snímcíchvalues, keyTimes, path, calculationMode
CAAnimationGroupSeskupování více animacípole animations, jednotný duration
CATransitionPřechod mezi stavy vrstvytype (fade/push/moveIn/reveal), subtype, startProgress

CABasicAnimation — nejjednodušší a nejoblíbenější podtřída. CAKeyframeAnimation se používá pro složité trajektorie (např. pohyb po Bézierově křivce). CAAnimationGroup spouští více animací paralelně. CATransition — hotový přechod mezi obrázky nebo stavy obsahu.

CAMediaTiming — řízení času

Protokol CAMediaTiming — základní součást CAAnimation. Definuje základní časové vlastnosti: duration (trvání), repeatCount (počet opakování), repeatDuration (celková doba opakování), autoreverses (návrat na začátek), beginTime (čas spuštění vzhledem k rodiči), timeOffset (posun v rámci jednoho cyklu), speed (rychlost přehrávání).

Vlastnost fillMode (CAMediaTimingFillMode) určuje zobrazení vrstvy před (backwards) a po (forwards) animaci. Hodnoty: removed (výchozí — návrat k model layer), forwards (zůstává v konečném stavu), backwards (zobrazuje počáteční stav před spuštěním), both (kombinuje oba typy chování). fillMode funguje pouze s isRemovedOnCompletion = false.

CAAnimation dědí CAMediaTiming a může být vnořena do rodičovské animace (CAAnimationGroup). V tomto případě se beginTime počítá vzhledem k začátku rodiče a duration je omezeno rodičem. Speed = 2.0 zrychluje animaci dvakrát.

CAAnimationGroup a CAKeyframeAnimation

CAAnimationGroup spojuje více CAAnimation do jedné skupiny. Všechny podřízené animace se spouštějí paralelně, pokud není pro každou nastaven beginTime. Skupina má vlastní duration, které omezuje maximální dobu trvání podřízených animací. timingFunction skupiny se použije jako výchozí hodnota, pokud podřízená animace nenastavila vlastní.

CAKeyframeAnimation animuje vlastnost přes více klíčových snímků definovaných polem values. Parametr keyTimes (pole NSNumber od 0 do 1) určuje časová razítka pro každý snímek. calculationMode určuje interpolaci: linear, discrete (bez interpolace), paced (rovnoměrná rychlost), cubic (spline), cubicPaced.

swift
import QuartzCore

// CAAnimationGroup — kombinace animací
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 — pohyb po trajektorii
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 s vlastními hodnotami
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 // vzhledem k aktuální pozici
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup provádí fade, scale a rotate paralelně s duration 2.0. CAKeyframeAnimation s path a calculationMode = .cubicPaced zajišťuje rovnoměrný pohyb po Bézierově křivce s automatickou rotací (rotationMode = .auto). bounceAnimation používá isAdditive pro relativní posun.

Příklady kódu ve Swiftu

Úplný příklad CAAnimation pro komplexní animaci vrstvy s použitím CATransition pro změnu obsahu a CAAnimationGroup pro pulzaci.

swift
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 — přechod mezi stavy
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // Měníme obsah pomocí transakce
        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 s type: .fade vytváří plynulý přechod mezi dvěma stavy backgroundColor. CAAnimationGroup kombinuje scale, opacity a shadowOpacity pro efekt pulzace. removeAllAnimations() resetuje všechny animace a vrací vrstvu k původním hodnotám model layer.

Často kladené otázky

Jaký je rozdíl mezi CABasicAnimation a CAKeyframeAnimation?

CABasicAnimation animuje vlastnost od počáteční (fromValue) do konečné (toValue) hodnoty s rovnoměrnou interpolací. CAKeyframeAnimation umožňuje zadat pole mezilehlých hodnot (values) a časových razítek (keyTimes) pro nelineární snímkovou animaci, včetně pohybu po křivce prostřednictvím path.

Kdy použít CAAnimationGroup?

CAAnimationGroup je potřeba, když má být několik animací prováděno paralelně se zárukou synchronizace: group duration omezuje všechny podřízené animace. Použijte skupinu pro kombinované efekty: škálování + změna průhlednosti + rotace současně.

Co je fillMode v CAAnimation?

fillMode určuje zobrazení vrstvy před (backwards) a po (forwards) animaci. Hodnota .forwards ponechá vrstvu v konečném stavu po dokončení animace (vyžaduje isRemovedOnCompletion = false). .both kombinuje backwards (počáteční stav před spuštěním) a forwards.

Jak odlišit CAAnimation od animace CALayer?

CAAnimation je objekt animace (instrukce), který se přidává do CALayer pomocí layer.add(animation, forKey:). Animace existuje jako samostatný objekt, lze ji znovu použít (s kopírováním) a spravovat prostřednictvím CAMediaTiming. Vrstva může mít více animací s různými klíči.

Shrnutí

  • CAAnimation — abstraktní základní třída Core Animation s implementací CAMediaTiming a CAMediaTimingFillMode
  • Hierarchie tříd — CABasicAnimation (jedna vlastnost), CAKeyframeAnimation (více snímků), CAAnimationGroup (seskupování), CATransition (přechody)
  • CAMediaTiming — protokol s duration, repeatCount, autoreverses, beginTime, timeOffset, speed, fillMode
  • CAAnimationGroup — paralelní provádění animací s jednotným duration a timingFunction
  • CAKeyframeAnimation — animace podle values/keyTimes nebo path (Bézierova křivka) s calculationMode
  • CATransition — předdefinované typy: fade, push, moveIn, reveal s možností konfigurace subtype
  • Správa — layer.add(animation, forKey:), removeAnimation(forKey:), removeAllAnimations()

Vyvineme mobilní aplikaci na klíč

IT Sectr vytváří aplikace pro iOS a Android pro startupy a podniky od roku 2017. Poradíme vám a navrhneme nejlepší řešení.

Prodiskutovat projekt

Přečtěte si také