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"];

< Previous PageNext Page >

Hide TOC

Did this document help you?
Yes: Tell us what works for you. It’s good, but: Report typos, inaccuracies, and so forth. It wasn’t helpful: Tell us what would have helped.