XAML in a Nutshell

75

This is the Title of the Book, eMatter Edition

Copyright © 2008 O’Reilly & Associates, Inc. All rights reserved.

Chapter 6Animations

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 exper-

tise 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 animation—frames.

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 accom-

plished through XAML—without any code—by 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?