Core Animation Part II: Layers “everywhere”

I hope you enjoyed last post about the View Animations, as I am enjoying the Core Text post by Eva. We will combine Core Animation and Core Text just for fun. I also hope you had the opportunity to play a little bit with the different methods provided with the UIView class as shown in the previous post.

I showed you the limitations of that type of animations: you cannot apply an animation to different view properties with different durations at the same time. This means you cannot, for example, translate a view for 3 seconds while rotating it for 5 seconds. To achieve more complex animations and synchronize them perfectly, you cannot really use the view animations. But, again, the main advantage of this kind of animations is that it is easy to implement and, as said, I am sure you will use them very often because of that.

To create more complex animations, we need to dig into a bunch of classes belonging to the CA framework. CA was originally designed for the iPhone and later, it was ported to the Mac. As a result, you got a very light and flexible way to make really complex animations.


In iOS, the basic element of an animation is a layer. A layer is an instance of the CALayer class that is defined as a model class in the sense of a Model-View-Controller design pattern. If you don’t know what I am talking about, well… you should. Go to the Apple documentation and look for the Model View Controller or MVC  design pattern. In the particular case, a CALayer object contains the value of the attributes (position, bounds, background color, border width and so on) that you can animate. The final drawing is performed by the UIView, in which the layer is stored. This also means that the CALayer is just a data container. It does not do the display, but it represents the value of the properties of the view you are animating.

Now, not every view property is animatable. You can find a list of the animatable properties in the last chapter of the Core Animation Programming Guide in the Apple Documentation. Just be aware that not all of them are applicable to the iOS. Since Core Image is not available on the iOS, the properties compositingFilter and filters are available since iOS 2.0, but they have no effect. Instead, anchorPoint, backgroundColor, borderColor, borderWidth, bounds, contents, contentRect, cornerRadius, doubleSided, frame, hidden, mask, masksToBounds, opacity, position, shadowColor, shadowOffset, shadowOpacity, shadowRadius, sublayers, sublayerTransform, transform and zPosition are the full list of the animatable properties.

Apple created a set of CALayer specialized subclasses that can help you in different tasks. CATextLayer, CAScrollLayer, CAReplicatorLayer, CAShapeLayer, CAGradientLayer, CATiledLayer, CAOpenGLLayer and CAEAGLLayer are the subclasses currently defined in the iOS. Mac OS X has additional subclasses that, I suppose, will be moved to the iOS as soon as it will makes sense for Apple.

To create a layer you have different possibilities. The easiest way is to ask the view you want to animate to provide a reference to its layer. Every view has its own layer. So, you can do this:

Another possibility is you create a layer first and then the pass it to the view:

or you can use the convenient method +layer in this way:

So, the layer contains the attributes that describe the layer. How can you animate it? It’s simple, create an animation and add it to the layer. As soon as you do that, the animation starts. You create an animation using -animation:forKeyPath:. You start an animation using -addAnimation:forKey: and you stop it, just removing it from the layer using -removeAnimationForKey: or -removeAllAnimations.

Before we go with the different animations, let’s play a little bit with a layer. Once you create a layer, you have to give it a position and set its bounds. Then, you can change many layer properties and finally, you have to add it to the layer of your main view to make it visible.

So, let’s try this:

Since CALayer is part of the QuartzCore framework, you need to add this framework to your project and import it in the right class

The anchorPoint

In the above example, I tried to set quite all the properties of a layer. You can animate them, but we will see that later. Before doing that, I want to show you an important (and misused) layer property: the anchorPoint. This is something sometimes confusing. The default value of a layer’s anchorPoint is (0.5, 0.5). This represents the center of the layer. You have to think of the anchorPoint, as it was the point of contact between the layer and its super layer. The anchorPoint is very impotent when you apply some rotation to your layer, since it is the center of the rotations. If you set it to (0.0, 0.0) and apply a rotation to the layer, the layer will rotate around its upper left corner.

Now, the problem is that when you change the anchorPoint values, the layer redraw as it was shifted by the anchorPoint value. You need then to apply a shift correction using this code:

Line 3 can be used to correct any translation due to a change of the anchor point.

Now, think of this. Changing the anchorPoint to (0.0, 0.5) and applying a 3D rotation to a layer along the x axis, you will get the same effect you get in Flipboard. We will see that later.

Next time

Next time we go with the transformations and then, we start with the basic animations.




(Visited 328 times, 1 visits today)