The animations you have added so far have been basic animations; they animate from one value to another value. If you want to animate a view’s properties through more than two values, you use a keyframe animation. A keyframe animation can be made up of any number of individual keyframes (Figure 27.3). You can think of keyframe animations as multiple basic animations going back to back.

Figure 27.3  Keyframe animation

Keyframe animations are set up similarly to basic animations, but each keyframe is added separately. To create a keyframe animation, use the animateKeyframesWithDuration:delay:options:animations:completion: class method on UIView, and add keyframes in the animation block using the addKeyframeWithRelativeStartTime:relativeDuration:animations: class method.

In BNRHypnosisViewController.m, update drawHypnoticMessage: to animate the center of the labels first to the middle of the screen and then to another random position on the screen.

[​U​I​V​i​e​w​ ​a​n​i​m​a​t​e​W​i​t​h​D​u​r​a​t​i​o​n​:​0​.​5​
 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​d​e​l​a​y​:​0​.​0​
 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​o​p​t​i​o​n​s​:​U​I​V​i​e​w​A​n​i​m​a​t​i​o​n​O​p​t​i​o​n​C​u​r​v​e​E​a​s​e​I​n​
 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​a​n​i​m​a​t​i​o​n​s​:​^​{​
 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​m​e​s​s​a​g​e​L​a​b​e​l​.​a​l​p​h​a​ ​=​ ​1​.​0​;​
 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​}​
 ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​ ​c​o​m​p​l​e​t​i​o​n​:​N​U​L​L​]​;​

[​U​I​V​i​e​w​ ​a​n​i​m​a​t​e​K​e​y​f​r​a​m​e​s​W​i​t​h​D​u​r​a​t​i​o​n​:​1​.​0​ ​d​e​l​a​y​:​0​.​0​ ​o​p​t​i​o​n​s​:​0​ ​a​n​i​m​a​t​i​o​n​s​:​^​{​
 ​ ​ ​ ​[​U​I​V​i​e​w​ ​a​d​d​K​e​y​f​r​a​m​e​W​i​t​h​R​e​l​a​t​i​v​e​S​t​a​r​t​T​i​m​e​:​0​ ​r​e​l​a​t​i​v​e​D​u​r​a​t​i​o​n​:​0​.​8​ ​a​n​i​m​a​t​i​o​n​s​:​^​{​
 ​ ​ ​ ​ ​ ​ ​ ​m​e​s​s​a​g​e​L​a​b​e​l​.​c​e​n​t​e​r​ ​=​ ​s​e​l​f​.​v​i​e​w​.​c​e​n​t​e​r​;​
 ​ ​ ​ ​}​]​;​

 ​ ​ ​ ​[​U​I​V​i​e​w​ ​a​d​d​K​e​y​f​r​a​m​e​W​i​t​h​R​e​l​a​t​i​v​e​S​t​a​r​t​T​i​m​e​:​0​.​8​ ​r​e​l​a​t​i​v​e​D​u​r​a​t​i​o​n​:​0​.​2​ ​a​n​i​m​a​t​i​o​n​s​:​^​{​
 ​ ​ ​ ​ ​ ​ ​ ​i​n​t​ ​x​ ​=​ ​a​r​c​4​r​a​n​d​o​m​(​)​ ​%​ ​w​i​d​t​h​;​
 ​ ​ ​ ​ ​ ​ ​ ​i​n​t​ ​y​ ​=​ ​a​r​c​4​r​a​n​d​o​m​(​)​ ​%​ ​h​e​i​g​h​t​;​
 ​ ​ ​ ​ ​ ​ ​ ​m​e​s​s​a​g​e​L​a​b​e​l​.​c​e​n​t​e​r​ ​=​ ​C​G​P​o​i​n​t​M​a​k​e​(​x​,​ ​y​)​;​
 ​ ​ ​ ​}​]​;​
}​ ​c​o​m​p​l​e​t​i​o​n​:​N​U​L​L​]​;​

U​I​I​n​t​e​r​p​o​l​a​t​i​n​g​M​o​t​i​o​n​E​f​f​e​c​t​ ​*​m​o​t​i​o​n​E​f​f​e​c​t​ ​=​
 ​ ​ ​ ​[​[​U​I​I​n​t​e​r​p​o​l​a​t​i​n​g​M​o​t​i​o​n​E​f​f​e​c​t​ ​a​l​l​o​c​]​ ​i​n​i​t​W​i​t​h​K​e​y​P​a​t​h​:​@​"​c​e​n​t​e​r​.​x​"​
 ​ ​ ​ ​ ​ ​ ​ ​t​y​p​e​:​U​I​I​n​t​e​r​p​o​l​a​t​i​n​g​M​o​t​i​o​n​E​f​f​e​c​t​T​y​p​e​T​i​l​t​A​l​o​n​g​H​o​r​i​z​o​n​t​a​l​A​x​i​s​]​;​

Keyframe animations are created using animateKeyframesWithDuration:delay:options:animations:completion:. The parameters are all the same as with the basic animation except that the options are of type UIViewKeyframeAnimationOptions instead of UIViewAnimationOptions. The duration passed into this method is the duration of the entire animation.

Individual keyframes are added using addKeyframeWithRelativeStartTime:relativeDuration:animations:. The first argument is the relative start time, which will be a value between 0 and 1. The second argument is the relative duration, which is a percent of the total duration and will also be a value between 0 and 1. The first keyframe starts 0% into the animation (a relative start time of 0.0) and will last 80% of the total duration (a relative duration of 0.8). The last keyframe starts 80% into the total duration (a relative start time of 0.8) and lasts 20% of the total duration (a relative duration of 0.2).

Build and run the application and enter some text. The labels will now animate to the center of the screen before exploding out to a random final position.