This is the Title of the Book, eMatter Edition
Copyright © 2008 O’Reilly & Associates, Inc. All rights reserved.
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?