CAReplicatorLayer's instanceDelay ignored

Question

I'm trying to create multiple "cards" to animate them afterwards using this code:

CAReplicatorLayer *cardsWrapperLayer = [CAReplicatorLayer layer];

cardsWrapperLayer.instanceCount = 4;
cardsWrapperLayer.instanceDelay = 10;
cardsWrapperLayer.instanceTransform = CATransform3DMakeTranslation(0, phoneSize.height + self.phonePadding, 0);

[cardsWrapperLayer addSublayer:self.cardLayer];

but they are appearing all at the same time, even if the instanceDelay is set to 10. I have this piece of code in the viewDidAppear method.

Answer 1

instanceDelay doesn’t do anything by itself, it just shifts the “current time” for each instance. To see something happen, you need to add an animation, like this:

CABasicAnimation *fadeIn = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeIn.fromValue = @0; // if we don’t specify a toValue, it’ll animate to the layer’s current value which by default is 1
fadeIn.duration = 0.2;
fadeIn.removedOnCompletion = NO;
[self.cardLayer addAnimation:appear forKey:@"appear"];

Note that the removedOnCompletion is important—if you let the animation remove itself automatically, then it’ll be gone as soon as the first instance finishes animating and the other instances will snap to their final state. You should remove the animation manually at a later time, like when you know it’ll be over (i.e. the animation’s duration ✕ the replicator layer’s instanceCount)—just call -removeAnimationForKey: on the base layer with the key you added the animation with.

Answer 2

You also have to make sure that you set the animation on the replicator layer's sublayer, not on the replicator layer itself! Bit me hard after 3 years of not working with CAReplicatorLayer again.