Timing

This chapter discusses timing issues when using Core Animation.

Using a Single Timing Function For a Keyframe Animation

The CAKeyframeAnimation class provides a powerful means of animating layer properties. However, CAKeyframeAnimation does not allow you to specify a single animation timing function that is used for the entire path. Instead you are required to specify the timing using the keyTimes property, or by specifying an array of timing functions in the timingFunctions property.

You can provide a single timing function for the animation by grouping the keyframe animation in a CAAnimationGroup, and setting the group animation’s timing function to the desired CAMediaTimingFunction. The animation group’s timing function and duration take precedence over the keyframe animation’s timing properties.

A code fragment that implements this strategy is shown in Listing 1.

Listing 1  Using a single timing function for a keyframe animation

// create the path for the keyframe animation
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,15.0f,15.f);
CGPathAddCurveToPoint(thePath,NULL,
                      15.f,250.0f,
                      295.0f,250.0f,
                      295.0f,15.0f);
 
// create an explicit keyframe animation that
// animates the target layer's position property
// and set the animation's path property
CAKeyframeAnimation *theAnimation=[CAKeyframeAnimation
 
                                      animationWithKeyPath:@"position"];
theAnimation.path=thePath;
 
// create an animation group and add the keyframe animation
CAAnimationGroup *theGroup = [CAAnimationGroup animation];
theGroup.animations=[NSArray arrayWithObject:theAnimation];
 
// set the timing function for the group and the animation duration
theGroup.timingFunction=[CAMediaTimingFunction
 
                                functionWithName:kCAMediaTimingFunctionEaseIn];
theGroup.duration=15.0;
// release the path
CFRelease(thePath);
 
 
// adding the animation to the target layer causes it
// to begin animating
[theLayer addAnimation:theGroup forKey:@"animatePosition"];