Core Animation makes the iPhone awesome. All the nice visual cues that Apple’s built-in apps gives users are courtesy of Core Animation. How apps jiggle around when I’m moving them. How moving messages in Mail involves a flying message icon and a satisfying blue pulse from the selected folder. How terminated apps shrink into nothingness in the middle of the screen. All thanks to Core Animation. It enables developers to easily provide direct manipulation (one of Ben Schneiderman’s many excellent contributions) to their applications.
In this case, I mocked up the view in Mail where the user moves a message to another folder. There is a bar along the top for the icon (a Star Trek one from the Iconfactory) and a short description. Below it is a UITableView list of items. When the user clicks on an item, the icon flies into the item, and then the item pulses. Instead of duplicating Mail’s blue pulse, I reused the Yellow Fade Technique from the last post.
The icon animation code is almost the same as the Mac version. Instead of driving the animation through an NSView, I control it through a CALayer; I add animation objects to it keyed on its position and then assign it a new position.
Yellow Fade Technique
The yellow fade animation is very different. There is no NSGraphicsContext on the iPhone. Instead of re-implementing drawLayer:, I simply give the NSView the appropriate properties and change its alpha value through animation code. The new code is much shorter and takes advantage of Core Animation’s repeat and auto-reverse methods.
As with the Mac implementation, this sample project (Mac OS X 10.5, Xcode 3.1.2) is available at BDCoreAnimation_iPhone on Google Code.