While Core Animation is generally amazing, it's especially helpful for giving the user feedback for their actions. Clicking a button can now easily show an animation that tells the user what the button is doing. To illustrate this, I'm going to walk through two simple animations: a flying icon and a yellow fade. Below is a Quicktime movie showing the two animations, and at the bottom of the post is the code behind them.
First, I setup the skeleton application. I have a source list on the left with a couple entries and child entries. I hooked this view up with a simple NSOutlineView and an NSTreeController. On the far right, there is a button to start the animation. See the screenshot below.
Clicking the button fires the selector animateButton:. That method does a couple things. First, it figures out where the button is and where it wants the icon to go, including the two curve points for the bezier path. Next, it calculates the actual bezier path the icon will follow. Then, it defines the animation, setting a duration and supplying the delegate and the path. Finally, it assigns that animation to the relevant NSView and starts the animation by calling setFrameOrigin:. The one important subtlety that is in [CAKeyframeAnimation animationWithKeyPath: @"frameOrigin"];. I found Core Animation to be very finicky about what key path I used to associate the animation with the view; frameOrigin works consistently, so try it if other key paths don't seem to work.
Yellow Fade Technique
A couple years ago, 37 Signals popularized a user feedback animation called the Yellow Fade Technique. When a user performs an action or the (web) application updates, the new information's background flashes yellow and then fades away.
Clicking the button fires the selector animateButton:. This time, that method does a few different things. First, it creates an NSView and gives it a CALayer; the delegate is set to the controller, so that the controller can draw the layer. Next, it defines the animation. This animation is a bit more complicated. It's actually a group of animations. Since I want the yellow overlay to flash twice, I define four animations: fade in and out once then fade in and out again. Perhaps the code could be tighter, but this approach works. Finally, I assign the animation group to the NSView and start it with an NSView call to setFrame:. Notice that I use frameOrigin for the animation's key path, even though I start the animation with setFrame:. Again, Core Animation is finicky.
I have an additional method defined for drawing the layer's content: drawLayer:. In this method, I draw a dark yellow curved rectangle around the cell frame and then fill the cell frame with a lighter yellow.
Combine these two animations together for a nice icon swooshing into the source list with the source list item flashing yellow when the icon finishes. Check out the project (Mac OS X 10.5, Xcode 3.1.2) at BDCoreAnimation on Google Code.