Leopard Animation - Ridiculously Easy

In Leopard there is a whole new framework called Core Animation. Its main purpose is to help us build really beautifully animating user interfaces. The really cool part though is that you don't even have to learn a new framework to take advantage of animation. The animation stuff has been deeply integrated with AppKit's NSView (and NSWindow but more on that in another post) so that you don't even really have to know much about Core Animation to get smooth animation happening in your application.

In this post I'm assuming you already know Cocoa but if you don't check out one of the great tutorials on CocoaDevCentral.

So on to the code.

Animation in Cocoa is achieved by messaging a proxy for a view instead of the view. So instead of telling the view to move we tell the animator proxy to move and it takes care of launching the animation into a new thread and cleaning up when the thread is done etc. In the sample app (see it in action below) the arrow keys are used to move an image around the screen, an up arrow means move the image to the top of the window etc. The app is very simple so as to be able to focus on only one thing (animation). Its a simple view subclass that is expanded to take up the whole content view of the window. When the view gets initialized it creates an NSImageView and adds it as a subview (the image has a slight shadow too to make it pop more). The base view also provides the event handling by accepting first responder and over ridding the keyDown: method. That is all there is to it, most of the code is handling events.

The method to make the image go to the right of the screen is below.

- (void)right {
    NSRect moveTo = [mover frame];
    moveTo.origin.x = NSMaxX([self bounds]) - NSWidth(moveTo);
    [[mover animator] setFrame:moveTo];
}

As you can see this is very typical looking Cocoa code. We first get the frame of the subview (called 'mover') that we want to move, set its origin to the desired value (the right edge in this case) and then set the frame of the image view. Notice however that we are sending the setFrame: method to the mover's animator proxy. That little half line of code is what allows us to get the cool animation effects. In the past we'd have to start a thread, have the thread interpolate between each version of the frame (old and new) and smoothly animate the view across the path. All that complexity is now hidden from us and all we have to do is use the proxy.

I also set the 'wants layer' flag in IB for the base view, and that is it. I told you is ridiculously easy!

Now to slow down the animation.

if ([event modifierFlags] & (NSAlphaShiftKeyMask|NSShiftKeyMask)) {
    [NSAnimationContext beginGrouping];
    [[NSAnimationContext currentContext] setDuration:2.0f];
}
...
if ([event modifierFlags] & (NSAlphaShiftKeyMask|NSShiftKeyMask)) {
    [NSAnimationContext endGrouping];
}

Here is a movie of the app in action...

And here is the code.