Chapter 6. Storyboards and Animations

In the past, animations in user interfaces have been left to specialized developers and graphic designers. Most animations used in web applications require expertise in technologies such as Flash or GIF (Graphics Interchange Format). While these technologies vastly differ in how animations are created, they both utilize the basic building block of animationframes.

The new presentation subsystem in Windows Vista (provided through the WinFX runtimes for Windows 2003 and XP) also supports the concept of animation using frames. In frame-based animation, each frame contains an object to be animated. That animation might be a change of color over time or movement from one point to another. Each frame specifies the state of the object at a given point in time. In frame 1, the circle is blue; in frame 2, it is blue-green; in frame 3, it is green, etc.

Flash developers have long been able to apply common animations to objects such as color changes, fades, and movement. Windows developers, however, had no such mechanism, so the task of coding such animations was time-consuming and difficult. XAML offers the ability to animate elements with the same ease as other technologies, making standard animations a breeze to create while providing the framework for more complex animations.

XAML uses storyboards to create animations. Standard animations, including fades, color changes, transforms, and even position changes, are easily accomplished through XAMLwithout any codeby using storyboards.

One of the hardest pieces of animations to nail down is timing . Timing involves determining how long an animation will last and how long each frame within it should take. If an object is being changed from green to blue, how long should each stage of the color change take? At what point does the object start looking more blue than green? And even more difficult, how many color changes (frames) will it take to go from blue to green in the time allotted for the total animation?

Thankfully, Avalon provides an efficient timing system that no longer requires a developer to manage timers himself. Instead, timing and redrawing the screen is handled by Avalon and defined in XAML. Like all XAML elements, Animation elements can be extended to create custom animations.

Animations in XAML are primarily created through the declaration of storyboards . A Storyboard is a collection of animations, each of which animates a specific property of an element (such as Opacity), which can be manipulated to make an element appear to fade in or out of view. So, you aren't really animating an element per se; you're animating an attribute of the target element.

A Storyboard accomplishes this by specifying one or more SetterTimeline elements. A SetterTimeline describes the target of the animation (a XAML element) and the attribute being animated. The attribute might be the Background color of an element, its position on a Canvas, its Width, or its Height.

The SetterTimeline element also declares one or more animation types to be applied to the element's attribute. As you might expect, common animations are already defined and ready for use, such as ColorAnimation and DoubleAnimation. The animation element really does all the work in the animation. It tells WPF everything it needs to know to perform the animationthe initial value of the attribute, the ending value of the attribute, and the length of the animation. From the animation declaration, WPF can determine how long each frame must be to accommodate the animation.