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.
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.
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.
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: