Now, that you know how to create a basic animation, I am sure you want to know how to combine more animations together. You can achieve this task using the CAGroupAnimation class.

If you review the previous post and look at the class relationship, you’ll see that the CAAnimationGroup is a subclass of CAAnimation. CAAnimationGroup has only a property: animations.

This property is intended to add an array of animations to a layer. Suppose, for example, you want to change the transparency of a layer while your are moving it on the screen. If you simply create the two animations and add them to a layer one by one, you loose the control of the synchronization and depending on what your app is doing, you could have some visible delay between the 2 animations.

You solve this problem passing an array of animations (i.e. grouping them) and Core Animation will take care of the synchronization. Let’s see how to do it correctly. First, let’s create 2 animations: a translation and a transparency.

Suppose we use the same layer of the previous post:

Now, the wrong way to use the previous animations is:

Now, between the first and the second call, anything can happen and you do not know when those animations are exactly added to the layer.

Regarding the animation duration, you should know that the animation you add to the group is stronger than the duration of a single animation. If the duration of the single animation is longer than the animation group duration, the animation is clipped. For example, if you have an animation group with duration 5 seconds and one of the animations lasts 10 seconds, then only the first 5 seconds of that animation are performed. Additionally, if a single animation lasts less than animation group, the duration is not scaled.

You should also know that the delegate and removeOnCompletion of each single animation are ignored. Instead, the delegate and removeOnCompletion of the animation group are considered.

Next time, we give a look at the keyframe animations.