Aug 13, 2011

Core Animation Part 1: What is Core Animation?

Everything we do in user interfaces on our iPhones and iPads, and increasingly on our Macs is animated. Table views slide in and out of view smoothly. Buttons flow between different text and colors, popup views flip on to the screen. An indicator pulses smoothly to alert the user that his download is complete. When the device rotates, screen elements flow into place instead of just jumping jarringly between portrait and landscape.

This type of animation is more than just "eye candy". It helps the user feel connected to your application. It gives them important clues to how the application is operating, provides valuable visible feedback and projects a sense of high quality design to your user.

All of this is accomplished using Core Animation. Even if you have no idea what a CALayer is or never typed #import <QuartzCore/QuartzCore.h>  at the top of one of your header files you've used this technology as a developer. Animation is pervasive throughout the UIKit. UITableView has 11 methods which mention animated or animation, UINavigationController has 7. If you've ever pushed a view controller on a stack you've used it.

One key to understanding Core Animation is to know that it's extremely easy to use. If you've written standard animation code before you have to set up some sort of timer and animation loop. At each time interval, the system will call you back and tell you "Time is now .4 seconds." if you wanted your ball to move across the screen in 1 second, you have to compute the current position as 40 percent of the way between the start and end point, assuming you wanted to use linear interpolation. If you want a more natural movement, you might choose an easing function or some other type of animation timing function that gives more natural movement. Each time you get called you compute the updated position of everything in your scene and draw it. At 30 or 60 frames per second you get smooth motion.

If you want to do full 3D animation, such as in a game, or in my case, the 3D animated page curl we use in Google Books, you will have to do this sort of animation. Core Animation does have some 3D elements but at heart is is a 2D Technology (We might call it 2.5D).

Throw all that stuff out. With CA, you express intent. What I mean is that you express the state you want your object to start in, the state you want it to end in, and how long you want it to take. The CA system takes over for you from there. It's also possible to have the animation continue from the current state, so if you are moving something from right to left, and then decide it needs to move back to the right, it will pick up right in the middle of the previous animation. We'll see this in our demo application. The main screen of the app has two view modes - grid and circle, and smoothly animates the position of subviews to the desired end state even if the animation is still in progress. It's really quite amazing and requires no cleverness on the part of the developer.

The most basic element of Core Animation is the  layer (CALayer). That layer is then composited on to the screen using the graphics card so that you automatically get hardware accelerated rendering. Layers have animatable properties such as opacity, bounds, position, shadow and more. You animate layers by manipulating these properties, either directly, by attaching a concrete subclass of  CAAnimation to the layer, or implicitly, by simply setting the value of a property. Within a run loop, these property changes and animations are enclosed in a CATransaction so that they are all applied together. The animations run in their own thread, so they run without interfering with the rest of your program.

We'll get back to directly animating layers, the different types of layers and animations and implicit vs. explicit animation in future posts. In the next post, I'm going to talk about how you animate UIViews as opposed to CALayers using view animations. With nothing more than this, you'll see how easy it is to make some really cool animated user interfaces. We'll get into code as I explain how I implemented the home screen of my CADemo application. The code's up on GitHub if you want to follow along.

No comments: