CAAnimation — Key Concepts, CAAnimationGroup and Layer Animations
CAAnimation is an abstract base class of Core Animation that defines the common interface for all animation types: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition. This article explains the class hierarchy, key properties, animation grouping, and practical examples in Swift.
Key Takeaways
- CAAnimation — abstract base class of Core Animation, from which CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition inherit
- CAAnimationGroup — parallel execution of multiple animations with a shared duration and timingFunction
- CAKeyframeAnimation — keyframe animation with arrays of values and timestamps
- CAMediaTiming — time management protocol: duration, repeatCount, autoreverses, timeOffset
- CATransition — predefined transitions between layer states (fade, push, moveIn, reveal)
What is CAAnimation?
CAAnimation is an abstract class of Core Animation that defines the common interface for all animations. It implements the CAMediaTiming protocol (duration, repeat, autoreverse) and CAMediaTimingFillMode (behavior before/after animation). CAAnimation cannot be instantiated directly — use one of its subclasses: CABasicAnimation, CAKeyframeAnimation, CAAnimationGroup, CATransition or CAAnimation (via animationForKeyPath).
Each CAAnimation is added to a CALayer using the add(_:forKey:) method. The forKey parameter is a unique animation identifier on the layer. A single keyPath can have only one active animation. To replace an animation, use removeAnimation(forKey:) before adding a new one.
According to Apple, CAAnimation is a "temporary" change to the layer. After the animation completes, the presentation layer returns to the model layer values if fillMode and isRemovedOnCompletion are not set.
CAAnimation Class Hierarchy
Core Animation provides four main CAAnimation subclasses, each for its own animation scenario. Understanding the hierarchy helps you choose the right type for your task.
| Class | Purpose | Key Features |
|---|---|---|
| CABasicAnimation | Animates one property from A to B | fromValue, toValue, byValue, keyPath |
| CAKeyframeAnimation | Animation across multiple keyframes | values, keyTimes, path, calculationMode |
| CAAnimationGroup | Groups multiple animations | animations array, single duration |
| CATransition | Transition between layer states | type (fade/push/moveIn/reveal), subtype, startProgress |
CABasicAnimation is the simplest and most popular subclass. CAKeyframeAnimation is used for complex trajectories (e.g., movement along a Bezier curve). CAAnimationGroup runs multiple animations in parallel. CATransition is a ready-made transition between images or content states.
CAMediaTiming — Time Management
The CAMediaTiming protocol is a fundamental part of CAAnimation. It defines basic timing properties: duration, repeatCount, repeatDuration, autoreverses, beginTime (start time relative to parent), timeOffset (offset within one cycle), speed (playback rate).
The fillMode property (CAMediaTimingFillMode) determines the layer display before (backwards) and after (forwards) the animation. Values: removed (default — returns to model layer), forwards (stays in the final state), backwards (shows the initial state before start), both (combines both behaviors). fillMode works only when isRemovedOnCompletion = false.
CAAnimation inherits CAMediaTiming and can be nested in a parent animation (CAAnimationGroup). In this case, beginTime is calculated relative to the parent's start, and duration is limited by the parent's duration. Speed = 2.0 doubles the animation speed.
CAAnimationGroup and CAKeyframeAnimation
CAAnimationGroup combines multiple CAAnimation instances into a single group. All child animations start in parallel unless beginTime is set for each one. The group has its own duration, which limits the maximum duration of child animations. The group's timingFunction is used as the default value if a child animation does not set its own.
CAKeyframeAnimation animates a property across multiple keyframes, defined by an array of values. The keyTimes parameter (array of NSNumber from 0 to 1) defines timestamps for each frame. calculationMode specifies interpolation: linear, discrete (no interpolation), paced (uniform speed), cubic (spline), cubicPaced.
swift
import QuartzCore
// CAAnimationGroup — animation combination
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 — trajectory movement
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 with custom values
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 // relative to current position
layer.add(bounce, forKey: nil)
}CAAnimationGroup executes fade, scale and rotate in parallel with a duration of 2.0. CAKeyframeAnimation with path and calculationMode = .cubicPaced provides uniform movement along a Bezier curve with automatic rotation (rotationMode = .auto). bounceAnimation uses isAdditive for relative offset.
Swift Code Examples
A complete CAAnimation example for complex layer animation using CATransition for content switching and CAAnimationGroup for pulse effects.
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 — transition between states
let transition = CATransition()
transition.type = .fade
transition.duration = 0.5
transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
demoLayer.add(transition, forKey: nil)
// Changing content via transaction
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 with type: .fade creates a smooth transition between two backgroundColor states. CAAnimationGroup combines scale, opacity and shadowOpacity for a pulse effect. removeAllAnimations() cancels all animations and returns the layer to its original model layer values.
Frequently Asked Questions
What is the difference between CABasicAnimation and CAKeyframeAnimation?
CABasicAnimation animates a property from an initial (fromValue) to a final (toValue) value with uniform interpolation. CAKeyframeAnimation allows you to specify an array of intermediate values (values) and timestamps (keyTimes) for non-linear keyframe animation, including curve-based movement via path.
When should I use CAAnimationGroup?
CAAnimationGroup is needed when multiple animations must run in parallel with guaranteed synchronization: the group duration limits all child animations. Use group for combined effects: scaling + opacity change + rotation simultaneously.
What is fillMode in CAAnimation?
fillMode determines the layer display before (backwards) and after (forwards) the animation. The value .forwards keeps the layer in the final state after the animation completes (requires isRemovedOnCompletion = false). .both combines backwards (initial state before start) and forwards.
How is CAAnimation different from CALayer animation?
CAAnimation is an animation object (instruction) that is added to a CALayer via layer.add(animation, forKey:). The animation exists as a separate object, can be reused (with copying), and is managed through CAMediaTiming. A layer can have multiple animations with different keys.
Summary
- CAAnimation — abstract base class of Core Animation implementing CAMediaTiming and CAMediaTimingFillMode
- Class hierarchy — CABasicAnimation (single property), CAKeyframeAnimation (multiple frames), CAAnimationGroup (grouping), CATransition (transitions)
- CAMediaTiming — protocol with duration, repeatCount, autoreverses, beginTime, timeOffset, speed, fillMode
- CAAnimationGroup — parallel animation execution with a single duration and timingFunction
- CAKeyframeAnimation — animation via values/keyTimes or path (Bezier curve) with calculationMode
- CATransition — predefined types: fade, push, moveIn, reveal with subtype configuration
- Management — layer.add(animation, forKey:), removeAnimation(forKey:), removeAllAnimations()
We will develop a mobile application turnkey
IT Sectr creates iOS and Android applications for startups and businesses since 2017. We will advise you and propose the best solution.
Read also