Preface

In Core Animation, we often use CABasicAnimation or its subclasses to create animations.

In most cases we have to use a keypath. I’ve been studying animations recently and want to organize all the available keypaths in iOS Core Animation.

CALayer Properties

Without further ado, let’s show a code snippet to demonstrate the topic of this post:

1
2
3
4

CABasicAnimation * scaleAnimation = [CABasicAnimation animation];
scaleAnimation.keyPath = @"transform.scale.x";
scaleAnimation.fromValue = @(1.0f);
scaleAnimation.toValue = @(1.0f * ScreenWidth);

We usually add an animation to a view’s layer like this:

1

[xxxView.layer addAnimation: scaleAnimation forKey:@"testAnimationName"];

Notice that scaleAnimation.keyPath is actually a string — something like a member variable that can be modified from outside. But we can’t just write anything we want.

It’s actually a property, or member variable, of the layer.

What Are All the Modifiable Keypaths?

CALayer animatable properties — the following can be animated:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

nchorPoint
backgroundColor
backgroundFilters
borderColor
borderWidth
bounds
compositingFilter
contents
contentsRect
cornerRadius
doubleSided
filters
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowPath
shadowRadius
sublayers
sublayerTransform
transform
zPosition

The rest are inherited from CALayer

CAEmitterLayer animatable properties:

1
2
3

emitterPosition
emitterZPosition
emitterSize

CAGradientLayer animatable properties

1
2
3
4
5

colors
locations
endPoint
startPoint

CAReplicatorLayer animatable properties

1
2
3
4
5
6
7

instanceDelay
instanceTransform
instanceRedOffset
instanceGreenOffset
instanceBlueOffset
instanceAlphaOffset

CAShapeLayer animatable properties

1
2
3
4
5
6
7
8

fillColor
lineDashPhase
lineWidth
miterLimit
strokeColor
strokeStart
strokeEnd

CATextLayer animatable properties

1
2
3

fontSize
foregroundColor

CATransform3D Key-Value Coding Extensions (KVC keypaths)

1
2
3
4
5
6
7
8
9
10
11
12
13

rotation.x
rotation.y
rotation.z
rotation
scale.x
scale.y
scale.z
scale
translation.x
translation.y
translation.z

CGPoint keyPaths

1
2
3

x
y

CGSize keyPaths

1
2
3

width
height

CGRect keyPaths

1
2
3
4
5
6

origin
origin.x
origin.y
size
size.width
size.height

There are also additional animatable properties you can refer to, and for more details you can check the official documentation, as well as some structs.

The above are all the animation-related keypaths I’ve found so far.

Animatable Property Descriptions

Geometry Properties

Note: there’s no frame here. A layer’s frame is not animatable; we can change position and bounds instead of frame.

Layer Content

Shadow Properties

Opacity Property

Mask Properties

ShapeLayer Properties

Summary

The above are all the keypaths I’ve collected and organized, for reference only.

Years ago, walking down the street from Huihuang International to Xi’erqi, I kept wondering why animation keypaths are always strings and so easy to typo. Today this post of mine provides the answer: KVC member variables don’t let you access the variable name directly; instead, you have to write the variable name as a string, and the content is manipulated through the string.