Chaining Core Animation animations

Question

Which is the most elegant and modular way to chain animation in a Core Animation context?

I mean to do animations that starts just when other finished (for example, changing position and then opacity).. normal approach is to directly change properties:

layer.position = new_point;
layer.opacity = 0.0f;

but this will do them at the same time. I want to make one wait for the other..

And what about chaining animations for different objects? I've read about CATransaction used like:

[CATransaction begin]
layer1.property = new_property;
[CATransaction begin]
layer2.property2 = new_property2;
[CATransaction commit];
[CATransaction commit];

but it doesn't seem to work..

Answer 1

I don't believe you can "nest" CA animations as you have in your example.

You need to specify a delegate for the animation and put your second "transition" within the animationDidStop:finished: selector of the delegate.

Might want to have a look at Apple's Animation Types & Timing Programming Guide.

Answer 2

You can also use animation grouping and use the beginTime field of the animation. Try something like this:

CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
[posAnimation setFromValue:[NSNumber numberWithFloat:0.0]];
[posAnimation setToValue:[NSNumber numberWithFloat:1.0]];
// Here's the important part
[posAnimation setDuration:10.0];
[posAnimation setBeginTime:0.0];

CABasicAnimation *borderWidthAnimation = [CABasicAnimation animationWithKeyPath:@"borderWidth"];
[borderWidthAnimation setFromValue:[NSNumber numberWithFloat:0.0]];
[borderWidthAnimation setToValue:[NSNumber numberWithFloat:1.0]];
// Here's the important part
[borderWidthAnimation setDuration:10.0];
[borderWidthAnimation setBeginTime:5.0];

CAAnimationGroup *group = [CAAnimationGroup animation];
[group setDuration:10.0];
[group setAnimations:[NSArray arrayWithObjects:posAnimation, borderWidthAnimation, nil]];

[layer addAnimation:group forKey:nil];

Notice that the duration of the entire animation is 10 seconds. The first one starts at second 0 and the second one starts at 5 seconds.