iOS stack Animations in series

Question

I would like to create a set of animations in Series. For example

• Fade in for 2 seconds

• Rotate for 2 seconds

• Fade out for 2 seconds

What is the best way to achieve this? I have tried to use the CAAnimation group but that seems to animate its array of animations in parallel. I want a do animation 1 then do animation 2 and then do animation 3 (Series)

Answer 1

You should be using the block based animation for all animations like these.

For an animation like this the animateKeyFrames block would be perfect...

// set duration for the entire sequence of animations
[UIView animateKeyFramesWithDuration:6
                               delay:0
                             options:0
                          animations:^{
                              // add fade in keyframe
                              // starts at 0% lasts for 33% of animation
                              [UIView addKeyFrameWithRelativeStartTime:0
                                                      relativeDuration:0.333
                                                            animations:^{
                                                                view.alpha = 1.0;
                                                            }];
                              // add rotation key frame
                              // starts at 33% lasts for 33% of animation
                              [UIView addKeyFrameWithRelativeStartTime:0.333
                                                      relativeDuration:0.333
                                                            animations:^{
                                                                view.transform = CGAffineTransformMakeRotation(rotationAngle);
                                                            }];
                              // add fade out key frame
                              // starts at 66% lasts for 33% of animation
                              [UIView addKeyFrameWithRelativeStartTime:0.666
                                                      relativeDuration:0.333
                                                            animations:^{
                                                                view.alpha = 0.0;
                                                            }];
                          }
                          completion:nil];

Answer 2

Nowadays, you'd generally use UIView block animation via animateKeyframesWithDuration. Specify an animation duration of 6 seconds, and then add three calls to addKeyframeWithRelativeStartTime, starting at relative start time of 0, 0.333, and 0.666, respectively, each with a duration of 0.333, and in those three animation blocks, do your appropriate animations.