Working with CAReplicatorLayer

Question

I've been trying to create a cool text effect with the CAReplicatorlayer, CATextLayer and very basic animations. I'm trying to make the letters look like they are being droped from the top of the screen followed by cool replicators which will become less and less visible. I've managed to do this effect but not completely.

So far this is what I've got:

CATextLayer *messageLayer = [CATextLayer layer];

[messageLayer setForegroundColor:[[UIColor blackColor] CGColor]];
[messageLayer setContentsScale:[[UIScreen mainScreen] scale]];
[messageLayer setFrame:CGRectMake(0, 0, 40, 40)];
[messageLayer setString:@"A"];


CAReplicatorLayer *replicatorX = [CAReplicatorLayer layer];

//Set the replicator's attributes
replicatorX.frame = CGRectMake(0, 0, 40, 40);
replicatorX.anchorPoint = CGPointMake(0,0);
replicatorX.position = CGPointMake(0, 0);
replicatorX.instanceCount = 9;
replicatorX.instanceDelay = 0.15;
replicatorX.instanceAlphaOffset = -0.1;

replicatorX.zPosition = 200;
replicatorX.anchorPointZ = -160;

[replicatorX addSublayer:messageLayer];

[self.view.layer addSublayer:replicatorX];


messageLayer.position = CGPointMake(40, 400);
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.y"];
animation.fromValue = [NSNumber numberWithInt:0];;
animation.toValue = [NSNumber numberWithInt:400];
animation.duration = 3;
[messageLayer addAnimation:animation forKey:@"s"];

I have two problems:

1. The replicated layers are starting in the End point.
2. When the main layer reach his last animated point the animation stops and the replicated layers can't finish their animation.

Answer 1

Setting the correct values to the animation object's fillMode and removedOnCompletion properties will hopefully solve your problems:

"The replicated layers are starting in the End point."

This is caused by the value assigned to instanceDelay property, which delays the animation with 0.15s in your example. To present the animation from the fromValue, you need to account for this delay by setting the animation's fillMode to kCAFillModeBackwards .

animation.fillMode = kCAFillModeBackwards;

"When the main layer reach his last animated point the animation stops and the replicated layers could not finish their animation."

This happens because by default "the animation is removed from the target layer's animations upon completion."1. You can override this default behavior by setting the animation attribute removedOnCompletion to NO.

animation.removedOnCompletion = NO;

Hope this helps. :)