Microsoft Offers 'Animation Library' for Fast and Fluid Animatons in Windows 8 Metro Apps

Windows 8 Metro apps feature "fast and fluid" animations. In Windows 8 Consumer Preview, you will notice that animations are an integral part of the user experience. "Animations can tell the user what happened as a result of a specific action. Even a simple addition or deletion of an item in a list can be […]

Windows 8 Metro apps feature "fast and fluid" animations. In Windows 8 Consumer Preview, you will notice that animations are an integral part of the user experience. "Animations can tell the user what happened as a result of a specific action. Even a simple addition or deletion of an item in a list can be made fluid, modern, and informative using a subtle animation," explains Angelina Gambo and Hamid Mahmood, Program Managers, Windows.

"When you log in to your PC, the items in the Start menu animate in. When you launch an immersive app or zoom into the Start menu, the experience is enriched with a smooth animation."

In the May 1 blog post, Gambo and Mahmood offers Metro app developers some tips on having fast and fluid animations for their Windows 8 apps.

Windows 8 Metro Apps offers Fast and Fluid Annimations

In Windows 8 smooth and glitch-free animations are achieved through a capability called independent animation that runs independently from thread running the core UI logic. These animations also utilize the GPU to improve performance and to allow for a smooth and consistent frame rate.

"In Windows 8 many of the animated elements are composed by a composition engine that runs on a separate thread. The engine's work is offloaded from the CPU to the GPU. Moving composition to a non-UI thread means that the animation won't jitter or be blocked by the app working on the UI thread (such as JavaScript code execution or sync operations). The GPU hardware is optimized for delivering visually rich graphics and makes use of video memory resources. Using the GPU greatly improves performance, allowing animations to run at a smooth and consistent frame rate," said Gambo and Mahmood.

Next, Microsoft recommends app developers to use the "Animation Library," a suite of Metro style animations to utilize the the platform's independent animation capabilities. These animations are used throughout Windows UI and are also available for your Metro app.

The Animation Library animations provide the following benefits:

  • Motion that aligns to Windows 8 Metro style animation principles.
  • Fast and fluid transitions between UI states that inform but do not distract the user.
  • Better understanding for the user of transitions within an app. For example, when an item is added to a list, rather than the new item instantly appearing and the list instantly updating, the new item animates into view and the other items in the list are animated to move to their new positions to make room for the added item. This makes it clear to the user what has just happened in a way that instantaneous transitions do not.

Regardless if the code is in HTML, JavaScript or XAML, the Animation Library shows you how to use the right animations so the interface can be fast and fluid. "We are excited about the fast and fluid user experiences that independent animation enables for Windows 8 apps. We hope that you find the Animation Library and the support for custom animations that run independently of the UI thread useful when you create compelling user experiences in your Metro style apps for Windows 8," Gambo and Mahmood adds.

Microsoft has also made available an Animation Library for developers to use.

Take a look at the video below that demonstrates UI enriched with smooth animations in Metro styled apps: