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:
1 2 3 4 5 |
CALayer *layer = [CALayer layer]; [layer setPosition:CGPointMake(100.0, 100.0)]; [layer setBounds:CGRectMake(0.0, 0.0, 50.0, 60.0)]; [layer setBackgroundColor:[[UIColor redColor] CGColor]]; [self.view.layer addSublayer:layer]; |
Now, we can create and apply the animation to this layer:
1 2 3 4 |
CABasicAnimation *animation = [CABasicAnimation animation]; [animation setFromValue:[NSValue valueWithCGPoint:CGPointMake(100.0, 100.0)]]; animation.toValue = [NSValue valueWithCGPoint:CGPointMake(100.0, 250.0)]; [layer addAnimation:animation forKey:@"position"]; |
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:
1 2 3 4 |
[CATransaction begin]; [CATransaction setDisableActions:YES]; [layer setPosition:CGPointMake(100, 250)]; [CATransaction commit]; |
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
The CAAnimation class diagram is wrong.
Really? Where is wrong?