Windows 8 Animations Library Creates Better User Experiences
Windows 8 has great built-in animations, which can draw users deeper into your app.
Earlier this month Microsoft put Windows 8 Metro style apps on display at the Build conference
in Anaheim, CA. I had the pleasure of presenting a session on styling, animations, and templating for Metro style apps using XAML
. I was excited to present my session, for many reasons, but what really stood out to me: the way animations have been given first-class status in Windows 8.
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.
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.