Core Animation Overview

Core Animation, introduced in Mac OS X Leopard, rewrites the rules for creating fluid and animated user interfaces. Using an automatic and implicit animation model and thoroughly integrated with the Cocoa AppKit framework, Core Animation enables you to provide a cinematic experience to users of your application. Best of all, it takes advantage of the latest motion graphics techniques and hardware and requires a minimum of code.

The use of animation can serve a variety of purposes. It can show the user where a window they were using is going, such as the movement of a window minimizing into the Dock. It can serve as an indication of how a new item will fit in a set of existing ones, such as when the icons in a toolbar move apart to accept a new item during a drag and drop action. And, it can highlight global changes in the user interface, such as when Time Machine focuses on a Finder window and the rest of the Desktop drops away. These kinds of animations both delight users and help them understand what is happening with real-time feedback.

Maybe most exciting of all, Core Animation serves as a unifying API to combine the power of all of the Mac OS X graphics frameworks, such as QuickTime, Quartz, OpenGL, Quartz Composer, and more, into a single interface. For example, where once it was difficult to place user interface controls on top of a playing QuickTime movie, you can do so now with ease.

The Big Picture

Core Animation is a collection of Objective-C classes in the QuartzCore Framework that implement a complete animation solution. Previously, if you wanted to add animation to your application, you had to implement loops and timers, provide frame-by-frame drawing, and keep track of the state of your animation as it executed. With Core Animation, you simply manipulate the properties of the animation that you want to execute and Core Animation takes care of the rest in the background.

The basic concept that Core Animation uses is that of the layer. Layers are 2D surfaces organized in a 3D space. They can contain text, Core Graphics 2D content, OpenGL-based 3D content, Quartz Composer scenes, QuickTime movies, images, standard Cocoa NSViews, and other layers. In addition to its content, each layer also has controllable properties that control its position, geometry, background color, opacity, mask, and shadow as well as any Core Image filters that are applied to the layer's content. The content from each layer is composited with all other layers in the most efficient manner possible, utilizing the full power of modern multi-core systems and GPU hardware. And, not only does it take full advantage of today's hardware, it will be able to take full advantage of tomorrow's hardware as well.

There are two levels at which Core Animation can be used. At a high layer, you can take advantage of Application Kit's Core Animation integration, known as Cocoa Animation, which allows you to easily set animatable properties to any NSView based control or subclass. With the flip of a switch, entire AppKit view hierarchies can be manipulated by Core Animation. Or, you can go further and directly use create and layers—the essential objects that Core Animation works with—to create the most sophisticated animations that you can imagine. First let's take a look at Cocoa Animation.

Cocoa Animation

One of the goals in the development of Core Animation was to make it as easy as possible to add animations to existing user interfaces. In order to enable this, the Application Kit has been enhanced to allow any NSView hierarchy to be backed with a matching hierarchy of Core Animation layers. When enabled, views draw to their respective layers instead of to their graphics context. These layers are then composited by Core Animation for display.

Many of the controls in Leopard already use Core Animation to communicate their behavior to users. For example, the NSToolbar control uses it to indicate the results of what the toolbar will look like when you add and remove buttons. The NSPredicateEditor uses animation to smoothly adjust as rules are added and edited by a user. The new collection view and Image Kit browser smoothly animates reordering or filtering of their contents. Whenever you add one of these controls to your application, you're using Core Animation automatically with no additional work needed on your part.

Going further, you can control animation properties for any view simply by flipping a switch in Interface Builder on that view to indicate that it, and its children views, should be layer-backed and managed by Core Animation. Once you do this, you can manage animation properties, such as shadows, transparency, and rotation from within Interface Builder's inspector. You can also set keynote-style transitions to happen when views are added and removed from the active view hierarchy.

In addition to indicating that a view hierarchy should be layer-backed and managed by Core Animation in Interface Builder, you can also use a single line of code to indicate the same thing:

[someView setWantsLayer:YES];

Once a view is layer backed, you can also control all of its animation properties directly with your code using a proxy object, the animator.

The Animator

Each layer-backed view has an animator proxy associated with it through which you can set the animatable properties for a view, kicking off new animations as needed when those properties are updated. Communicating your intentions to the animator is very simple and straightforward. All you need to do is to get the animator associated with a layer and then send it a message with the new state of the layer. For example, to change the location and size of a view using an animator, you simply use the following message:

[[myView animator] setFrame:rect];

When this line of code is executed, the animator will change the state of the layer that backs the view from its current location and size to the new size and kick off an animation in the background, returning control to your application.

As simple as it is, this very simple one-line example shows the power of Core Animation. Before Core Animation, you would have had to create a cached representation of a view and then set up an alternate thread to move it around the screen while making sure that the data structures you used were structured to allow for concurrent access. Now, Core Animation can handle all of the details, including running the animation on a separate thread leaving you to focus on the details of your particular application.

Retargeting Animations

When you set an animation into motion, control of your application's event handling thread returns immediately while the animation runs in the background. This means that your application can continue to process events as the interface is in motion. Sometimes this will result in further changes to the state of an application's user interface with additional state updates set into motion before previous updates had completed. Core Animation handles this situation with ease and simply modifies running animations appropriately.

For example, if your application starts the animation of a graphic to the left side of the screen, but a subsequent event indicates that the graphic should move to the top center of the screen, you can simply pass the new end state that you would like the image to have to the animator and Core Animation will figure out how to change the path of the image to the new state, seamlessly.

The ability to retarget animations on the fly allows a smoothly fluid interface to be built—one that behaves like a user expects it to.

Using Layers Directly

The ability to manipulate a NSView hierarchy with Core Animation provides an incredible amount of flexibility. But, for the creation of brand-new interfaces, such as Cover Flow or Front Row, or to mix media types in the same view, such as overlaying text and controls on top of a QuickTime movie, you'll need to go one step further and work with layers directly.

The following code shows an example of this:

CATextLayer *textLayer = [CATextLayer layerWithText:@"Hello" fontSize:25];
QTMovieLayer *movie = [QTMovieLayer layerWithMovie:qtMovie];
[toplayer setSublayers:[NSArray arrayWithObjects:textLayer, movieLayer, nil]];

To display a view containing your layer hierarchy, you can use the following code:

- (void) awakeFromNib {
    [view setWantsLayer:YES];
    [view setLayer:toplayer];
}

Once you do this and run your application, the layer hierarchy you built will be displayed and run.

There's So Much More

As you can see, Core Animation provides a powerful new way to create user interfaces. You can use it to animate small parts of an interface, or you can build completely new interfaces for your application, if appropriate. There's much more to Core Animation than can be covered in this article. In addition to what we've discussed so far, Core Animation provides the ability to group animations, set keyframes, and perform complex path animations composed of multiple states over time. These abilities let you build up compound animations. The goal, as always, should be to enhance the user's experience without distracting from the main task.

To learn more about using Core Animation in your applications, read the Animation Overview, the Core Animation Programming Guide and the Core Animation Cookbook in the ADC Reference Library.

Posted: 2008-12-03