In this tutorial I am going to show you how to create a very interesting animation with replicator layers, instances of the CAReplicatorLayer class. After building so many apps and using every single framework of Cocoa Touch, every time I build something new for a customer, I feel the need to spend some time researching new functionalities and interaction patterns to make the solution we provide really unique. Most of the time, I focus on usability and try to push the limits of Cocoa Touch.

In this post, I am going to show an animation we recently deliver to one of our customers for an Apple TV app. Here, I am going to show you only the animation and I am leaving out where and how we used it in the app.

The animation is based on replicator layers, instances of the CAReplicatorLayer class. Many of the examples you can find in the Internet show a very limited application of the replicator layers. You can find examples either showing how to create a reflection effect or a spinner similar to the UIActivityIndicatorView. Replicator layers can go beyond these simple examples. They can add some unique and interesting visual effect to your application.

Four years ago, I already wrote about replicator layers showing you how to build a very nice animation using this specialized subclass of CALayer. So, check that post for additional details. Here, I am going to build another beautiful animation you integrate in your app.

This video shows the final animation we are going to build in this post:

Now, imagine using this animation in combination with a custom view controller transition or a gesture recognizer (either a touch-based gesture on the iPhone/iPad or a focus-based gesture on the Apple TV).

Let’s see how to build this animation.

Basic layer

Create a new Single-View Application project and name it ReplicatorLayer. As you may know, replicator layers generate a copy of every sublayer you add to them. I am going to create a new standard layer (an instance of the CALayer class). Let’s add the following property to the view controller:

In this snipped of code, I instantiate a CALayer. Then, I set its size to 100 x 100 and its position to (50, 50). Finally, I change the background color to white.

Replicator layer

Replicator layers replicate the added layer a number of times specified by the instanceCount property (default value is 1). You can also configure the replicator layer to introduce a color variation using its instanceRedOffset, instanceGreenOffset, instanceBlueOffset, instanceAlphaOffset properties.

To create a new layer, I add a new property to the view controller:

This replicator layer creates 14 copies (line 1) of its sublayers (the number 14 works very well for my iPad Pro, but you can change it accordingly to your device). In line 2, I translate each sublayer replica 100 points along the positive x direction. The instanceDelay property delays the copy of each replica by 0.8 seconds. This value will affect the final animation.

Next, I need a new replicator layer to copy the previous xReplicatorLayer along the positive y direction:

To display all these layers, I need to add them to the layer tree hierarchy. You can do it, for example, in the viewDidAppear(_:) method:

In line 1, I add the whiteLayer to the xReplicatorLayer. This generates 14 replicas of the whiteLayer. In line 2, I add the xReplicatorLayer to the yReplicatorLayer. This replicates the xReplicatorLayer 12 types along the y direction. Finally, I add the yReplicatorLayer to the layer tree.

Replicator Layer Animations

Let’s add the animations. I need two animations for the basic layer. The first animation applies a scale transform to the whiteLayer. It scales the layer from 1.0 to 0.0 and vice versa (the animation autoreverses). The animation begins with a delay of half second.

The second animation animates the corner radius of the whiteLayer from 0 to 75 points. This animation also autoreverses and starts with a delay of half second.

To keep the previous animations in sync, I add an animation group and add the 2 animations to it:

Since I chose white as a color for the layer background, I also change the background color of the view of the view controller:

You can now run the application.

Conclusions

Replicator layers remain my preferred animation tool for their power, flexibility and the potential effects they can provide. You can extend this example with additional features. For example, you can use the contents property of the whiteLayer to render an image on it:

With additional 10 minutes of work you can also add to this project an AVFoundation capture session and render the camera buffer on the whiteLayer:

If you want to do go beyond you can also add some effect using Core Image or Metal. I leave this to you.

Geppy

Geppy Parziale (@geppyp) is cofounder of InvasiveCode (@invasivecode). He has developed iOS applications and taught iOS development since 2008. He worked at Apple as iOS and OS X Engineer in the Core Recognition team. He has developed several iOS and OS X apps and frameworks for Apple, and many of his development projects are top-grossing iOS apps that are featured in the App Store.

iOS Consulting | INVASIVECODE

iOS Training | INVASIVECODE