It used to be if you wanted to animate an object across a complex path, you would either have to create a chained series of view animations using animateWithDuration:animations:completion, or if you wanted your animation to proceed along a curved path, you had to use Core Animation CAKeyframeAnimation. CAAnimation is NOT easy to figure out.
In iOS 7, Apple added a new method, animateKeyframesWithDuration:delay:options:animations:completion:, that lets you create very elaborate keyframe animations with fairly simple UIView calls.
One thing that is not clear about this call: It takes options of the enum type UIViewKeyframeAnimationOptions. Those values include constants like UIViewKeyframeAnimationOptionCalculationModeLinear and UIViewKeyframeAnimationOptionCalculationModeCubic. Those values do NOT control the timing of the whole animation. Instead, they tell the system how to interpolate the values between the individual animations in the sequence. If you use UIViewKeyframeAnimationOptionCalculationModeLinear, the animations creates smooth, linear transitions between the intermediate values you specify. If you use UIViewKeyframeAnimationOptionCalculationModeCubic, the animation follows a curved path between the values you specify.
The docs don't tell you this, but you can also control the timing of the whole keyframe animation sequence to use ease-in, ease-out, linear, or other animation curves. (The values you can use are UIViewAnimationOptionCurveEaseInOut, UIViewAnimationOptionCurveEaseIn, UIViewAnimationOptionCurveEaseOut, and UIViewAnimationOptionCurveLinear)
The method takes a code block. That code block should contain one or more calls to the method addKeyframeWithRelativeStartTime:relativeDuration:animations:. That method lets you specify a single step in your complex animation. The addKeyframeWithRelativeStartTime:relativeDuration:animations: also takes a code block. This code block specifies the changes that you want to apply in that code block. The start time and duration values for each keyframe are expressed with values from 0 to 1, which are relative to the duration of the entire keyframe animation sequence.
You can submit your individual keyframe animations in any order, and with times that run simultaneously. The system will schedule all the animations so they run at the proper times.
You can download a sample project that is a working example of keyframe view animation from this link on github:
Keyframe view animations demo project on github
Animated GIF created with Face Dancer
, available for free in the app store.
I'm available for one-on-one help at CodeMentor