How to chain different CAAnimation in an iOS application

R

5

23

I need to chain animations, CABasicAnimation or CAAnimationGroup but I don't know how to do it, the only that I do is that all the animation execute at the same time for the same layer.

How could I do it?

For example, a layer with its contents set to a car image:

1st: move X points to right

2nd: Rotate 90ª to left

3rd: Move X point

4th: Scale the layer

All this animations must be executed in a secuencial way, but I can't do it :S

BTW: I am not english, sorry if I made some mistakes in my grammar :D

Ragin answered 31/7, 2012 at 10:3 Comment(2)

Do you intend to do more advanced animations as well or only moving, scaling and rotating (not 3D)? – Choppy 31/7, 2012 at 10:28

Yes, I also use CATransform3DMakeRotation and others – Ragin 31/7, 2012 at 10:48

C

23

tl;dr: You need to manually add each animation after the previous finishes.

There is no built in way to add sequential animations. You could set the delay of each animation to be the sum of all previous animations but I wouldn't recommend it.

Instead I would create all the animations and add them to a mutable array (using the array as a queue) in the order they are supposed to run. Then by setting yourself as the animations delegate to all the animations you can get the animationDidStop:finished: callback whenever an animation finishes.

In that method you will remove the first animation (meaning the next animation) from the array and add it to the layer. Since you are the delegate you will get a second animation when that one finishes in which case the animationDidStop:finished: callback will run again and the next animation is removed from the mutable array and added to the layer.

Once the array of animations is empty, all animations will have run.

Some sample code to get you started. First you set up all your animations:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
[animation setToValue:(id)[[UIColor redColor] CGColor]];
[animation setDuration:1.5];
[animation setDelegate:self];
[animation setValue:[view layer] forKey:@"layerToApplyAnimationTo"];

// Configure other animations the same way ...

[self setSequenceOfAnimations:[NSMutableArray arrayWithArray: @[ animation, animation1, animation2, animation3, animation4, animation5 ] ]];

// Start the chain of animations by adding the "next" (the first) animation
[self applyNextAnimation];

Then in the delegate callback you simply apply the next animation again

- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)finished {
    [self applyNextAnimation];
}

- (void)applyNextAnimation {
     // Finish when there are no more animations to run
    if ([[self sequenceOfAnimations] count] == 0) return;

    // Get the next animation and remove it from the "queue"
    CAPropertyAnimation * nextAnimation = [[self sequenceOfAnimations] objectAtIndex:0];
    [[self sequenceOfAnimations] removeObjectAtIndex:0];

    // Get the layer and apply the animation
    CALayer *layerToAnimate = [nextAnimation valueForKey:@"layerToApplyAnimationTo"];
    [layerToAnimate addAnimation:nextAnimation forKey:nil];
}

I'm using a custom key layerToApplyAnimationTo so that each animation knows its layer (it works just by setValue:forKey: and valueForKey:).

Cliff answered 31/7, 2012 at 11:9 Comment(13)

David, how come you don't like setting different beginTime values for each animation? That's often simpler to code than chaining the animations using the completion method, and it works perfectly in my experience. – Lentil 31/7, 2012 at 20:31

@DuncanC It feels to fragile to me. Adding, removing or changing the order of the animations become more cumbersome and prone to errors. – Choppy 1/8, 2012 at 5:25

Thank you so much, I think both answers are valid to me, but the David aproach looks better to me. – Ragin 1/8, 2012 at 9:30

I like David's approach, but it loses the ability to play your animation backwards. – Morrissette 28/5, 2013 at 5:58

@RhythmicFistman You could read from the queue in the reverse order to play the sequence in reverse. If you also want the individual animations go backwards then you can multiply the speed of the individual animations by -1 go play them backwards. nextAnimation.speed *= -1; – Choppy 28/5, 2013 at 6:43

@RhythmicFistman So maybe not "it loses the ability to" but fair enough. I think it's good that Duncan's and my solution both work while being very different. It shows that people have different preferences. FWIW Duncan's solution was a lot nicer than some other things I've seen been used and I upvoted it. – Choppy 28/5, 2013 at 7:46

This is great. But we might be the delegate for many "sequenced" CAAnimations in this same fashion. Is there an easy way to tag the CAAnimation object so we can pick a logic path based on the sender? – Gilbart 26/6, 2013 at 3:8

@RandyJames You can pass a key when adding the animation and use that key to look up the correct array to pick the next animation from. The key in addAnimation:forKey: is not the same as the key path in animationForKeyPath: – Choppy 26/6, 2013 at 6:11

I see: [someView.layer addAnimation:anim forKey:@"someKey"]; But I don't see how to dereference that valie on the CAAnimation object received in the animationDidStop method. – Gilbart 2/7, 2013 at 2:27

I have tried the "animation.beginTime = CACurrentMediaTime() + duration;" approach and DavidRönnqvists solution...And the one from DavidRönnqvist works perfect and it feels indeed less "fragile". – Steinway 8/7, 2013 at 10:24

Where did setSequenceOfAnimations come from? What do I do with that? – Whittington 10/4, 2016 at 5:37

@Whittington that's pre-dot-syntax for a property. It's simply the setter of a mutable array property that represents the remaining animations in the sequence. You can also see that applyNextAnimation reads and removes animations from the same property (using the pre-dot-syntax for the getter) – Choppy 10/4, 2016 at 11:58

Ok.. Would you be kind and have a look at this question of mine and share your thoughts? This answer of yours is 3 years old and I'm not sure if this still applies to what I should be doing now. https://mcmap.net/q/584310/-how-to-properly-animate-sequentially-using-caanimation/5184188 – Whittington 10/4, 2016 at 12:7

L

36

What david suggests works fine, but I would recommend a different way.

If all your animations are to the same layer, you can create an animation group, and make each animation have a different beginTime, where the first animation starts at beginTime 0, and each new animation starts after the total duration of the animations before.

If your animations are on different layers, though, you can't use animation groups (all the animations in an animation group must act on the same layer.) In that case, you need to submit separate animations, each of which has a beginTime that is offset from CACurrentMediaTime(), e.g.:

CGFloat totalDuration = 0;
CABasicAnimation *animationOne = [CABasicAnimation animationWithKeyPath: @"alpha"];
animationOne.beginTime = CACurrentMediaTime(); //Start instantly.
animationOne.duration = animationOneDuration;
...
//add animation to layer

totalDuration += animationOneDuration;

CABasicAnimation *animationTwo = [CABasicAnimation animationWithKeyPath: @"position"];
animationTwo.beginTime = CACurrentMediaTime() + totalDuration; //Start after animation one.
animationTwo.duration = animationTwoDuration;
...
//add animation to layer

totalDuration += animationTwoDuration;


CABasicAnimation *animationThree = [CABasicAnimation animationWithKeyPath: @"position"];
animationThree.beginTime = CACurrentMediaTime() + totalDuration; //Start after animation three.
animationThree.duration = animationThreeDuration;
...
//add animation to layer

totalDuration += animationThreeDuration;

Lentil answered 31/7, 2012 at 20:42 Comment(1)

In case this helps someone else: if you DO use an animation group (ie. not the code snippet here but David's first paragraph), then animation.beginTim is relative to the group.... so you don't set it to CACurrentMediaTime(), you just set it to totalDuration. This had me puzzled for some minutes.... – Airworthy 6/6, 2015 at 9:38

C

23