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í 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.
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 | Účel | Klíčové vlastnosti |
|---|---|---|
| CABasicAnimation | Animace jedné vlastnosti z A do B | fromValue, toValue, byValue, keyPath |
| CAKeyframeAnimation | Animace po více klíčových snímcích | values, keyTimes, path, calculationMode |
| CAAnimationGroup | Seskupování více animací | pole animations, jednotný duration |
| CATransition | Přechod mezi stavy vrstvy | type (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.
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 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.
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.
Úplný příklad CAAnimation pro komplexní animaci vrstvy s použitím CATransition pro změnu obsahu a CAAnimationGroup pro pulzaci.
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
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.
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ě.
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.
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í
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í.
Přečtěte si také