Core Image Transitions

Core Image transitions can add a lot of visual appeal to your application. You can see Core Image transitions at work in many modern Mac OS X applications. These effects are not new to the world of computer graphics. Indeed image transitions have been a staple of computer video production for many years. Core Image Transitions are exciting, however, because your application can run them in real-time from current images. This brings transitions out of the realm of motion video applications and makes them available to just about anybody.

When used in the proper context, Core Image transitions can provide your application with some exciting visual appeal with little effort. The same transitions can also quickly become annoying, however, when used indiscriminately. A ripple effect between the slides of a slide show enhances the presentation of the user's content. The same ripple effect, animated every time the user switches between two of the tabs in your tab pane, however, will quickly become tedious and annoying. If you use Core Image transitions in your user interface, please give careful consideration to whether or not the transition is appropriate. When in doubt, either offer the user the option of disabling the transition, or just leave it out altogether. Your users will appreciate your discretion.

From the standpoint of the Core Image API, a transition is "just another filter." Drawing the transition involves drawing the individual frames of an animation. The filter knows how to draw one frame of that animation. To make the transition, you will ask the filter to generate each successive frame and will play those frames back for the user.

The transition filters typically accept at least three parameters. The first two are, of course, the image you want to transition from and the image you want to transition to. The third parameter indicates what frame of the animation you want to render. For the built-in Core Image transitions this input parameter is usually called inputTime, and the value of the parameter will be a floating point number between 0 and 1. A value of 0 indicates that you are at frame zero of the animation and a value of 1 indicates that you have completed the transition. Your application might choose to divide the transition up into 30 frames, so you could step through those frames by starting the inputTime at 0 and incrementing it by 1.0/30.0 for each frame. If you want to run a transition "backward," then it's as easy as beginning your inputTime parameter at 1.0 and stepping backward through the frames.

Once you have created a transition filter and assigned its initial and final images, animating the transition is not any more complicated than repeatedly asking the filter for the current frame by setting the inputTime parameter and then asking the filter for its outputImage. The trickiest part is running the animation loop while keeping the application and the UI responsive. One of the best techniques for doing this is to use timers.