tumbljack

To 1e100f And Beyond with CAReplicatorLayer

CAReplicatorLayer is a powerful new class available in the Core Animation rendering and compositing framework. It’s a special hosting layer that can generate a potentially infinite number of copies, or instances, of its sublayer. Well, almost infinite.

A common feature of modern 3D rendering applications is the ability to replicate an object or artifact over a plane or given surface, resulting in complex scalable patterns that can resemble anything from textiles and woodgrain to skin and even hair.

CAReplicatorLayer packs a lot of this functionality into just a few lines of code. Setting one up would look something like this..


CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.instanceCount = 42;

replicatorLayer.instanceTransform = awesomeTransform;     //This was in the oven

replicatorLayer.instanceDelay = 0.6;

[replicatorLayer addSublayer:sublayer];   //This too


The transform is used to spread the layer instances across space, with transforms being multiplied for each new instance. A simple translation quickly creates a row of layers.

One replicator layer can be added as a sublayer of another, in effect creating a two dimensional array of layers, potentially a grid. And a single preservesDepth property bundles all of the functionality of CATransformLayer, allowing you to create three dimensional scenes out of a single blueprint layer.

When an animation is added to the original sublayer, it’s applied to each instance with a timing delay set with the instanceDelay property. Animating a collection of layers in sequence can get pretty fun.

Replicator layers also support color offsets with a built-in set of properties for incrementing or decrementing color values for each new instance. This stuff is really cool.

Apple has a phenomenal demo put together using this new class, which is one of the more beautiful things I’ve seen in a while, so check it out.

I played with this stuff for a little as well and put together another animation sequence. There’s a video of it here.  But if you’ve got a Mac, you might as well build and run.


  1. tumbljack posted this
To Tumblr, Love Metalab