< Previous PageNext Page >

Hide TOC

Animation

Animation is a key element of today’s user interfaces. When using Core Animation animation is completely automatic. There are no animation loops or timers. Your application is not responsible for frame by frame drawing, or tracking the current state of your animation. The animation occurs automatically in a separate thread, without further interaction with your application.

This chapter provides an overview of the animation classes, and describes how to create both implicit and explicit animations.

Animation Classes and Timing

Core Animation provides an expressive set of animation classes you can use in your application:

CABasicAnimation provides simple interpolation between values for a layer property.
CAKeyframeAnimation provides support for key frame animation. You specify the key path of the layer property to be animated, an array of values that represent the value at each stage of the animation, as well as arrays of key frame times and timing functions. As the animation runs, each value is set in turn using the specified interpolation.
CATransition provides a transition effect that affects the entire layer's content. It fades, pushes, or reveals layer content when animating. The stock transition effects can be extended by providing your own custom Core Image filters.
CAAnimationGroup allows an array of animation objects to be grouped together and run concurrently.

In addition to specifying the type of animation to perform, you must also specify the duration of the animation, the pacing (how the interpolated values are distributed across the duration), if the animation is to repeat and how many times, whether it should automatically reverse when each cycle is completed, and its visual state when the animation is completed. The animation classes and the CAMediaTiming protocol provides all this functionality and more.

CAAnimation and its subclasses and the timing protocols are shared by both Core Animation and the Cocoa Animation Proxy functionality. The classes are described in detail in Animation Types and Timing Programming Guide.

Implicit Animation

Core Animation’s implicit animation model assumes that all changes to animatable layer properties should be gradual and asynchronous. Dynamically animated scenes can be achieved without ever explicitly animating layers. Changing the value of an animatable layer property causes the layer to implicitly animate the change from the old value to the new value. While an animation is in-flight, setting a new target value causes the animation transition to the new target value from its current state.

Listing 1 shows how simple it is to trigger an implicit animation that animates a layer from its current position to a new position.

Listing 1 Implicitly animating a layer’s position property

// assume that the layer is current positioned at (100.0,100.0)

theLayer.position=CGPointMake(500.0,500.0);

You can implicitly animate a single layer property at a time, or many. You can also implicitly animate several layers simultaneously. The code in Listing 2 causes four implicit animations to occur simultaneously.

Listing 2 Implicitly animating multiple properties of multiple layers

// animate theLayer's opacity to 0 while moving it

// further away in the layer

theLayer.opacity=0.0;

theLayer.zPosition=-100;

// animate anotherLayer's opacity to 1

//  while moving it closer in the layer

anotherLayer.opacity=1.0;

anotherLayer.zPosition=100.0;

Implicit animations use the duration specified in the default animation for the property, unless the duration has been overridden in an implicit or explicit transaction. See “Overriding the Duration of Implied Animations” for more information.

Explicit Animation

Core Animation also supports an explicit animation model. The explicit animation model requires that you create an animation object, and set start and end values. An explicit animation won’t start until you apply the animation to a layer. The code fragment in Listing 3 creates an explicit animation that transitions a layer’s opacity from fully opaque to fully transparent, and back over a 3 second duration. The animation doesn’t begin until it is added to the layer.

Listing 3 Explicit animation

CABasicAnimation *theAnimation;

theAnimation=[CABasicAnimation animationWithKeyPath:@"opacity"];

theAnimation.duration=3.0;

theAnimation.repeatCount=2;

theAnimation.autoreverses=YES;

theAnimation.fromValue=[NSNumber numberWithFloat:1.0];

theAnimation.toValue=[NSNumber numberWithFloat:0.0];

[theLayer addAnimation:theAnimation forKey:@"animateOpacity"];

Explicit animations are especially useful when creating animations that run continuously. Listing 4 shows how to create an explicit animation that applies a CoreImage bloom filter to a layer, animating its intensity. This causes the “selection layer” to pulse, drawing the user’s attention.

Listing 4 Continuous explicit animation example

// The selection layer will pulse continuously.

// This is accomplished by setting a bloom filter on the layer

// create the filter and set its default values

CIFilter *filter = [CIFilter filterWithName:@"CIBloom"];

[filter setDefaults];

[filter setValue:[NSNumber numberWithFloat:5.0] forKey:@"inputRadius"];

// name the filter so we can use the keypath to animate the inputIntensity

// attribute of the filter

[filter setName:@"pulseFilter"];

// set the filter to the selection layer's filters

[selectionLayer setFilters:[NSArray arrayWithObject:filter]];

// create the animation that will handle the pulsing.

CABasicAnimation* pulseAnimation = [CABasicAnimation animation];

// the attribute we want to animate is the inputIntensity

// of the pulseFilter

pulseAnimation.keyPath = @"filters.pulseFilter.inputIntensity";

// we want it to animate from the value 0 to 1

pulseAnimation.fromValue = [NSNumber numberWithFloat: 0.0];

pulseAnimation.toValue = [NSNumber numberWithFloat: 1.5];

// over a one second duration, and run an infinite

// number of times

pulseAnimation.duration = 1.0;

pulseAnimation.repeatCount = 1e100f;

// we want it to fade on, and fade off, so it needs to

// automatically autoreverse.. this causes the intensity

// input to go from 0 to 1 to 0

pulseAnimation.autoreverses = YES;

// use a timing curve of easy in, easy out..

pulseAnimation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

// add the animation to the selection layer. This causes

// it to begin animating. We'll use pulseAnimation as the

// animation key name

[selectionLayer addAnimation:pulseAnimation forKey:@"pulseAnimation"];

Starting and Stopping Explicit Animations

You start an explicit animation by sending a addAnimation:forKey: message to the target layer, passing the animation and an identifier as parameters. Once added to the target layer the explicit animation will run until the animation completes, or it is removed from the layer. The identifier used to add an animation to a layer is also used to stop it by invoking removeAnimationForKey:. You can stop all animations for a layer by sending the layer a removeAllAnimations message.