It is time to give a look at some more advanced Core Animation techniques. In the previous posts, I reviewed the main concepts related to an animation and the different types of animations you can implement with the CA framework. I hope the difference between a basic animation, a group animation and a keyframe animation is clear now. If not, just drop me a mail with your doubts. Or, if you are at the WWDC, come to say hi and I will be happy to answer your questions.
After the introduction of the Core Animation framework, Apple introduced specialized layers to help us create more sophisticated animations. At the CALayer post (here), I mentioned these classes:
CAEAGLLayer. We will review some of them together during the next posts.
Let’s start with the
CAReplicatorLayer (my preferred one). This type of layers can help to create very interesting animations. So, let’s experiment a little bit with it.
First of all, the
CAReplicatorLayer class is a subclass of
CALayer, which allows you to create a specified number of copies of its sublayers. Each copy can have its geometric, temporal and color transformation.
After creating a
CAReplicatorLayer object, you can set some of its properties. One of then is the
-instanceCount property. This represents the number of copies of the sublayers you want to replicate. The default value is 1. Now, if you just set that to, say, 10, you won’t see too much on the screen, because the 10 layers will overlap. To make things more interesting, you can add a transformation to the replicator layer that will be “transmitted” to its sublayers.
Add this code to your
-viewDidLoad method of a view controller of a view-based application:
CAReplicatorLayer *replicatorX = [CAReplicatorLayer layer]; //1
replicatorX.bounds = CGRectMake(0, 0, 320, 460); //2
replicatorX.position = CGPointMake(320, 230); //3
replicatorX.instanceCount = 8; //4
CATransform3D finalTransform = CATransform3DMakeTranslation(50., 40., 0.); //5
[replicatorX setInstanceTransform:finalTransform]; //6
CALayer *subLayer = [CALayer layer]; //7
subLayer.bounds = CGRectMake(0, 0, 40, 30);
subLayer.position = CGPointMake(-140., 30.);
subLayer.borderColor = [[UIColor darkGrayColor] CGColor];
subLayer.borderWidth = 2.0;
subLayer.backgroundColor = [[UIColor whiteColor] CGColor];
subLayer.cornerRadius = 5.0; //8
[replicatorX addSublayer:subLayer]; //9
[self.view.layer addSublayer:replicatorX]; //10
If you execute this code, you get the following result:
Let’s give a look at the code step by step. At line 1, I just created a CAReplicatorLayer. At lines 2 and 3, I defined its bounds and position. At line 4, I set the instanceCount to 8. Here, I am telling the replicator layer to replicate its sublayer (that I am going to add to it soon) eight times. Additionally, I create a 3D transform and I pass it to the replicator layer, which will add it to its sublayer.
From line 7 to line 8, I create a sublayer (here, you can create your own) and at line 9, I add the sublayer to the replicator layer. Finally, I add the replicator layer to the layer of the main view to display it.
If you think of it, this model can be applied to more complex concepts. For example, you can create a particle system with this kind of layers.
Now, let’s go on. First, as you have seen in the previous code, the transformation is applied to the replicator layer and then, propagated to its sublayers. At line 5, the transformation is a simple translation of 50 pixels to the right and 40 pixels down. However, these shifts are applied to each replica of the sublayer. So, the first sublayer is generated, then a second layer is generated and translated of that amount with respect to the first sublayer. Then, a third sublayer is generated and a translation is applied with respect to the second layer and so on.
The same happens if you apply a rotation of, say, 30 degrees: each sublayer will be rotated of 30 degrees with respect to its previous replica. But, wait, what if I want to rotate all the sublayers at the same time? Very easy. Since
CAReplicatorLayer is a subclass of
CALayer, you can use the
-transform property on the replicator layer.
An additional set of properties of the replicator layer is represented by the color (
instanceAlphaOffset). You use the offset exactly as we did for the transform. Add this three lines of code after the line 4.
replicatorX.instanceRedOffset = .5;
replicatorX.instanceBlueOffset = .20;
replicatorX.instanceGreenOffset = -.60;
Combining what we saw until now and some NSTimer you can generate something link this.
Really cool, eh?
Next time, we give a look to another specialized CALayer class.
Previous posts on Core Animation:
- Core Animation Part V: Keyframe animations
- Core Animation Part IV: Grouping animations
- Core Animation Part III: Basic animations
- Core Animation Part II: Layers “everywhere”
- Core Animation Part I: Warm up