combine multiple CAAnimation sequentially

Question

I was reading about CATransactions and then thought this might help solve my problem.

This is what I wan't to do: I have 3 animations in the same layer, which all have their own duration. I create the animations using CAKeyframeAnimation with a CGMutablePathRef.

say for example:

• anim1 -> duration 5s
• anim2 -> 3s
• anim3 -> 10s

Now I want to serialize them sequentially. I tried to use CAAnimationGroup but the animations run concurrently. I read about CATransaction, is it a possible solution? Can you give me a little example?

thanks for help !

Answer 1

If by serialization you mean starting each animation after the previous one has finished, use the beginTime property (defined in CAMediaTiming protocol). Note that its documentation is a little misleading. Here's an example:

anim2.beginTime = anim1.beginTime + anim1.duration;
anim3.beginTime = anim2.beginTime + anim2.duration;

Answer 2

If You are sure to do this thing with Layers then you may try like following

Using Completion Block in CATransactions

-(void)animateThreeAnimationsOnLayer:(CALayer*)layer animation:(CABasicAnimation*)firstOne animation:(CABasicAnimation*)secondOne animation:(CABasicAnimation*)thirdOne{
    [CATransaction begin];

        [CATransaction setCompletionBlock:^{
            [CATransaction begin];

            [CATransaction setCompletionBlock:^{
                [CATransaction begin];

                [CATransaction setCompletionBlock:^{
                    //If any thing on completion of all animations
                }];
                [layer addAnimation:thirdOne forKey:@"thirdAnimation"];
                [CATransaction commit];
            }];
            [layer addAnimation:secondOne forKey:@"secondAnimation"];
            [CATransaction commit];
        }];
    [layer addAnimation:firstOne forKey:@"firstAnimation"];
    [CATransaction commit];

}

Another way is by applying delay to begin animation.

-(void)animateThreeAnimation:(CALayer*)layer animation:(CABasicAnimation*)firstOne animation:(CABasicAnimation*)secondOne animation:(CABasicAnimation*)thirdOne{
    firstOne.beginTime=0.0;
    secondOne.beginTime=firstOne.duration;
    thirdOne.beginTime=firstOne.duration+secondOne.duration;

    [layer addAnimation:firstOne forKey:@"firstAnim"];
    [layer addAnimation:secondOne forKey:@"secondAnim"];
    [layer addAnimation:thirdOne forKey:@"thirdAnim"];
}

And if You are going to use UIVIew Animation

//if View is applicable in your requirement then you can look this one;
-(void)animateThreeAnimationOnView{
    [UIView animateWithDuration:2.0 animations:^{
        //first Animation
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:2.0 animations:^{
            //Second Animation
        } completion:^(BOOL finished) {
            [UIView animateWithDuration:2.0 animations:^{
                //Third Animation
            }];
        }];
    }]; 

}