Photo by GuerrillaBuzz Crypto PR on Unsplash

Animate CALayer with Core Animation

Animations are cool. You add animation to any part of your iOS app and it’ll instantly look more attractive. So here’s a short beginner guid to get you started.

This is a list of animatable properties of a CALayer. You can also option+right click on a property to see if it’s animatable.

Animation can be achieved in many ways, but to keep it simple we’ll be working with 3 types of animation class. They are

1. CABasicAnimation,
2. CASpringAnimation
3. CAKeyframeAnimation

CABasicAnimation:

Let’s start with a CALayer and change it’s position with animation.

X Position changing animation

Play with the keyPath string, change fromValue and toValue to get the animation you want. You can also add multiple animation to a single layer, or a single animation to multiple layer.

Combining multiple animation

CASpringAnimation:

Sometime we want to add a bit of bounce to our animation. In that case CASpringAnimation can be useful. This animation class is same as CABasicAnimation mentioned above, however, it has a damping property that control the amount of spring motion the animation will cause.

Position animation with spring effect

CAKeyframeAnimation

Let’s say you have a layer you want to scale with animation. However, you don’t want the scaling value to simply go from 0 to 1. You want the value to go from 0.0 to 2.0, then 2.0 to 1.0, and finally 1.0 to 3.0, all within a timespan of 2 second. It can be achieved by creating multiple CABasicAnimation and adding it to a layer. Fortunately, there is a simpler way with CAKeyframeAnimation.

Conclusion

Now that you know how to animate, go build some wild stuff. At this point the only limit is your imagination.

Let me know if you have any question. I’m still learning about this topic, so if you have any suggestion, feel free to share.