Core Animation Part III: CABasicAnimation

Now that we know what a layer is as we have seen in the previous post of this series, let’s start to use the Core Animation framework. In the first post, we investigated the simple animations offered by the UIView class and I also mentioned the limitations of those methods. Here, we start to use the animations applying them to the layers.

The classes provided by the Core Animation (QuartzCore.framework) are quite a lot. The basis class is CAAnimation, but you never use it directly, since it is an abstract class. This class provides the methods to create an animation, set some animation attributes and provide the basic support for the CAMediaTiming and CAAction protocols (we’ll give a look at this in a moment).

CAAnimation has a lot of subclasses: CABasicAnimation, CAAnimationGroup, CAKeyframeAnimation, CATransition and CAPropertyAnimation. The following figure highlights the relationship of the classes belonging to Core Animation. Here, you can see the full core animation “family”:

Let’s start from the bottom part of the schema. A simple animation can be created using the CABasicAnimation class. It descends from the CAPropertyAnimation class, which is an abstract subclass of CAAnimation. CAPropertyAnimation provides a way to alter some properties of an animation.

Let’s give a look at the CABasicAnimation. This class has only three properties: fromValue, toValue, and byValue. These properties are intended to define the initial, the final or the intermediate values of an animatable property you want to alter during the animation. For example, if you are doing a rotation of a layer, you can define the initial angle with the fromValue property, its final value with the toValue property. Additionally, you can define the intermedia values using the byValue property. The animation will use these values and interpolate between them.

Let’s make an example. Remember we need a layer to apply this kind of animations. So, let’s create a layer first:

Now, we can create and apply the animation to this layer:

In the first line of the previous code, I create a basic animation using the convenience method +animation. The second line define the fromValue value. Now, here the trick. The value expected by the -fromValue method is defined of type id. Since I need to define a point (and a CGPoint is not an object), I derive an object from the CGPoint using the NSValue class and the method -valueWithCGPoint. Same approach is used for the -toValue method.

Finally, I add to the layer the animation. This triggers the animation. The key is in this case the name of the animatable property. The result is the following:

Well, that’s not really what you want, right? I wanted to move the layer from the starting position (100, 100) to the final position (100, 250). Instead, the layer jumps back to initial position when the animation is completed. To fix this, you need to change the layer position to (100, 250) just before starting the animation and since the position is an animatable property, you want to switch off the intrinsic animations. So, add the following lines of code before adding the animation to the layer:

Next time

That’s it for the basic animations. Next time, I show you how to group more animations and apply them to the same layer.

Geppy