Windows 8 UI's animations are available for Metro apps as well

May 2, 2012 14:50 GMT  ·  By

Among the features that applications built for Microsoft’s new Windows 8 operating system can benefit from, we can count fast and fluid animations.

Animations are an integral part of the user experience in Windows 8 Consumer Preview, and developers can take advantage of them to deliver more appealing apps that before.

“When you launch an immersive app or zoom into the Start menu, the experience is enriched with a smooth animation. Animations can tell the user what happened as a result of a specific action,” Angelina Gambo and Hamid Mahmood program managers, Windows, explain in a blog post.

“This visual feedback instills user confidence in the app’s responsiveness. Even a simple addition or deletion of an item in a list can be made fluid, modern, and informative using a subtle animation.”

One of the key components of the smooth and glitch-free animations that the Windows 8 experience has to offer is a component called “independent animation.”

It was meant to run independently from threads running the core UI logic. The engine’s work is offloaded to the GPU, and animations won’t be blocked by the app working on the UI thread.

“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,” Microsoft explains.

To leverage the platform’s independent animation capability, developers can take advantage of the Animation Library, a suite of Metro style animations specifically designed for this purpose.

These animations are used throughout the Windows 8 UI itself, but they were also made available for Metro apps, regardless of them being built using HTML or XAML.

Additionally, developers are also offered the possibility to build their own custom animations provided that the available ones are not enough. However, they are advised to ensure that these won’t end up running on the UI thread.

Additional info on these animations, along with sample code and details on how devs can take full advantage of them can be found in the aforementioned blog post.