How to loop through core animation sublayer array and apply animations in sequence

Question

Hi,

I want to animate through an array of CATextLayers, one after the other. The layers are created and added in a loop. I need to the animation to work like a flip book. Up to now, as a proof of concept, I have Used CABasicAnimations but in order to animate multiple layers in sequence, I think I need one of the other Core Animation options but am not sure which one. Here's the loop adding the sublayers:

- (void) initLayers: (NSString *)endChar
{
CALayer *rootLayer = self.layer;
int counter =0;

for (NSString *element in alphabet) {
    NSLog(@"element: %@",element);
    NSString *topLayerName = [NSString stringWithFormat:@"TOP_%d_%@",counter,element];
    NSString *bottomLayerName = [NSString stringWithFormat:@"BOT_%d_%@",counter,element];
    //get index of endchar - indexOfObject

    if (element != endChar) { //change to if key value is less than or equal to endchar index value

        CATextLayer *topLayer = [CATextLayer layer];
        topLayer.name = topLayerName;
        [topLayer setAnchorPoint:CGPointMake(0.5f,1.0f)]; // set the anchorpoint for the transform. This affects layer position too
        topLayer.bounds = CGRectMake(0.0f, 0.0f, CHARACTER_WIDTH, CHARACTER_HEIGHT/2);
        topLayer.string = element;
        topLayer.font = solariFont.fontName;
        topLayer.fontSize = FONT_SIZE;
        topLayer.backgroundColor = [UIColor blackColor].CGColor;
        topLayer.position = CGPointMake(30,30);
        topLayer.wrapped = NO;
        [rootLayer addSublayer:topLayer];


        CATextLayer *bottomLayer = [CATextLayer layer];

        bottomLayer.name =bottomLayerName;
        [bottomLayer setAnchorPoint:CGPointMake(0.5f,0.0f)]; // set the anchorpoint for the transform. This affects layer position too

        bottomLayer.bounds = CGRectMake(0.0f,CHARACTER_HEIGHT/4, CHARACTER_WIDTH, CHARACTER_HEIGHT/2);
        bottomLayer.string = element;
        bottomLayer.font = solariFont.fontName;
        bottomLayer.fontSize = FONT_SIZE;
        bottomLayer.backgroundColor = [UIColor blackColor].CGColor;
        bottomLayer.position = CGPointMake(topLayer.position.x,topLayer.position.y+2);
        bottomLayer.wrapped = NO;

        [rootLayer addSublayer:bottomLayer];

        counter++;
    }

}


[self animChars:rootLayer.sublayers];
}

The question is how can I animate the layers one after the other without the animation for every layer happening at the same time? I want to be able to loop through the sublayers array and animate each CATextLayer in sequence. Do I need CATransactions, MediaTiming? I've been through the core animation guide but am none the wiser.

Answer 1

This is very easy actually. You first need to determine the interval between the animations that you want. When you add the layer to the root layer inside the for loop, set the animations media timing's property beginTime with a CGFloat that increments every time the loop fires.

for the animation use a CABasicAnimation... if you don't know how to set one of those up there are plenty of resources on the web.

Answer 2

I did this by giving each animation a key and testing for this in animationDidStop:

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {

    if (anim ==[topFront animationForKey:@"topCharFlip"]) { ....