Staggered animations with CAKeyframeAnimation?

Question

I want to animate 3 different images at specific point in time such that it behaves this way.

1) 1st image moves from (Xx, Yx) to (Xz,Yz) 
2) Wait 10 seconds         


        

Answer 1

Edited

When I wrote this, I thought you could not use a CAAnimationGroup to animate multiple layers. Matt just posted an answer demonstrating that you can do that. I hereby eat my words.

I've taking the code in Matt's answer and adapted it to a project which I've uploaded to Github (link.)

The effect Matt's animation creates is of a pair of feet walking up the screen. I found some open source feet and installed them in the project, and made some changes, but the basic approach is Matt's. Props to him.

Here is what the effect looks like:

(The statement below is incorrect) No, you can't use a keyframe animation to animate multiple layers. A given CAAnimation can only act on a single layer. This includes group layers, by the way.

If all you're doing is things like moving images on a straight line, fading out, and fading in, why don't you use UIView animation? Take a look at the methods who's names start with animateWithDuration:animations: Those will let you create multiple animations at the same time, and the completion block can then trigger additional animations.

If you need to use layer animation for some reason, you can use the beginTime property (which CAAnimation objects have because they conform to the CAMediaTiming protocol.) For CAAnimations that are not part of an animation group, you use

animation.beginTime = CACurrentMediaTime() + delay;

Where delay is a double which expresses the delay in seconds.

If the delay is 0, the animation would begin.

A third option would be to set your view controller up as the delegate of the animation and use the animationDidStop:finished: method to chain your animations. This ends up being the messiest approach to implement, in my opinion.