Keyframe Animation - Core Animation - page 59

Using the steps to implement a keyframe animation (see the previous section “From Basic
Animation to Keyframe Animation,” in this chapter), let's map out the steps to imple-
ment the Icon Dance, as shown in Table 4-1.

TABLE 4-1 Icon Shake Animation Implementation Steps
Implementation Step Value Used

1. Specify the property to animate. transform.rotation.x

2. Specify the values to use for each keyframe. -2, 2, -2

3. Specify the total time duration for the 2 seconds

animation.
4. Specify time durations. Not used. We allow core animation to

split the time automatically between
each keyframe.

5. Specify timing functions (pacing). Use kCAMediaTimingFunctionLinear

for all keyframes.

We are only going to specify three keyframe values to keep this example pretty simple.
(Plus, that's all this animation really needs.) We simply set a large repeat number on the
animation and it loops indefinitely.

Take a look at the animation creation code in Listing 4-7. Notice that the three keyframes
are specified as NSNumber objects as indicated by a call to the utility function,
DegreesToNumber . You can see the declaration of this function in Listing 4-8.
DegreesToNumber takes a CGFloat value for its parameter and returns an NSNumber with
degrees converted to radians, which is done by a second utility function called
DegreesToRadians .

LISTING 4-7

Shake Animation for Rotating Each Layer Around the Center Axis

- ( CAAnimation *)shakeAnimation;
{

CAKeyframeAnimation * animation;
animation = [ CAKeyframeAnimation
animationWithKeyPath : @”transform.rotation.z” ];
[animation setDuration :0.5];
[animation setRepeatCount :10000];

// Try to get the animation to begin to start with a small offset
// that makes it shake out of sync with other layers.
srand ([[ NSDate date ] timeIntervalSince1970 ]);
float rand = ( float ) random ();
[animation setBeginTime :
CACurrentMediaTime () + rand * .0000000001];