Papa's Perspective

Windows 8 Animations Library Creates Better User Experiences

Windows 8 has great built-in animations, which can draw users deeper into your app.

• By John Papa
• 09/30/2011

Windows 8 is the best attempt I've seen to date to make them first class and simple to use while providing an immersive experience. Why are the new animations so important and compelling to me? Consider some of the best uses of animations you've experienced: They feel fluid; make the app flow from one state to another; provide subtle transitions between states just long enough to feel good, but not too long to detract from the experience. There's a fine balance between creating a great user experience with animations and creating today's equivalent of the blink tag. When used wisely, animations create a great user experience, which can translate to the user spending more time in your app.

What goes into great animations? There are a couple of factors to consider, including the code to create the animation, the durations, the actual transitions of state and elements, easings and much more. One reason I think Windows 8 hits a home run with animations is how easy they make it for the developer to replicate the built-in Windows animations in their apps.

Duration, Translation, Opacity and Easing

Notice how smoothly the elements animate when you select a collection of photos in Windows 8's Memories app? Breaking it down, these animations mostly use duration, translation, opacity and easing.

• The duration is the amount of time the animation takes (or possibly each aspect of the animation has its own duration).
• The translation of elements from x1, y1 to x2, y2 provides the movement.
• The opacity allows the elements to animate to become more or less opaque.
• The easing allows the animations to avoid using linear and static animations, and instead use dynamic and more realistic motion.

Sounds easy, but finding the right combination isn't always easy. Windows 8 has some great animations baked in; even better, developers can take advantage of the animations themselves using the Animations Library. The Animation Library is available for XAML or HTML5/JavaScript-based Metro style apps.

Let's assume you're creating an app with a page full of content. When you load this content, you may want it to load using the same animation Windows uses to load content on entrance. You could easily get this effect by applying an entrance animation transition to your container. The best way to understand the value of the Animation Library is perhaps to compare how this would be done without the Animations Library. Instead of applying just a few lines of XAML (or a CSS class), you could write an elaborate storyboard or set of visual states to achieve the animation. It could be done, but it would take many more lines of code and in some cases not be as performant.

The Animations Library provides three big advantages here:

• You can use the same animations Windows 8 uses, making your app flow smoothly with Windows 8, and thus immersing the user into the experience.
• The animations can be applied with one to three lines of XAML in many cases.
• The animations in the Animation Library are guaranteed to be highly performant.

Same Experience, Less Code

I show a great example of the value of the Animations Library in my session from Build. I first demonstrated an app that uses storyboards and visual states extensively for animations. Then I commented out about 50 lines of XAML and replaced it with just the few needed to apply an animation from the Animation Library. When running the app, the user sees the same results: a fast, performant animation, but this time with a fraction of the code.

I love to present and share ideas with developers. Some topics get me more excited than others; it's just human nature. But with the Animations Library, I got excited over how easy it's becoming to provide great user experiences.