Enhancing your Windows application experience with animation

An important aspect of any application is the experience provided to its users. With so many similar applications, the user experience can be a key differentiator between your application and the myriad competitors. One approach to differentiating your experience from that of others is through the use of animations. Animations, when applied well, not only create a more immersive experience but can also result in a more usable and intuitive experience. For example, by applying subtle animation techniques to interactive user interface elements users are drawn to them naturally and are not left wondering how to negotiate with your features. In addition, user’s expectations about the application experience are increasing. Users spend lots of hard earned money for modern PC hardware with high octane GPUs and they expect, even if implicitly, that the applications they use will leverage it.

As a Windows developer, you are accustomed to choice when it comes to your development experience. Luckily, the Windows API surface for providing animations is broad. You can apply animation techniques whether you are an old-school native code developer or if you are creating RIAs via Silverlight or HTML or if you prefer the .NET framework and WPF. In addition, all of these techniques can be applied unconditionally. As a developer you don’t have to target the specific capabilities of the underlying hardware. Your application is written in a consistent manner, and the animation abstractions provide the best support they can for whatever capabilities exist. The next sections introduce the various programming methods for leveraging animation support in Windows.

Native

In C++, the animation abstraction is the Windows Animation Manager. It is a set of COM primitives and utility classes built on DirectX and GDI+. If you are unfamiliar with animation concepts, this MSDN article is a great place to start. MSDN of course also has some samples that cover the basic spectrum of the animation concepts. In addition to the basic samples, MSDN also has a great showcase application named Hilo. Among other Windows7 concepts like touch and taskbar integration, Hilo makes great use of animations to improve the user experience.

Silverlight/WPF/XAML

While the implementation details between Silverlight and WPF may not be identical, the animation primitives exposed from both share a common object model and mark-up language (XAML). In fact, if you compare the MSDN animation overviews for both you can see they are strikingly similar (Silverlight/WPF). One of the key advantages that Silverlight and WPF have over native programming is the use of XAML, which provides a declarative syntax for defining animations. This allows for better separation of business logic from presentation technology, and also allows designers and developers to work independently on the same project.

Internet Explorer 9

Internet Explorer 9 provides 2D animation support through the HTML5 canvas element and through 2D transforms using CSS3. Both mechanisms are hardware accelerated, providing extremely fluid experiences. You can start taking advantage of this support by downloading IE9 from Beauty of the Web. For a great demo of canvas animation, check out my favorite - Canvas Pinball.

 

References

Windows Animation Manager http://msdn.microsoft.com/en-us/library/dd371981%28VS.85%29.aspx Windows Animation Overview http://msdn.microsoft.com/en-us/library/dd317017(v=VS.85).aspx Windows Animation Samples http://msdn.microsoft.com/en-us/library/dd940528(v=VS.85).aspx Hilo: Developing C++ Applications for Windows 7 http://msdn.microsoft.com/en-us/library/ff708696.aspx Silverlight Animation Overview http://msdn.microsoft.com/en-us/library/cc189019(VS.95).aspx WPF Animation Overview http://msdn.microsoft.com/en-us/library/ms752312.aspx Internet Explorer 9 Beta Guide: HTML5 Canvas Element http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_canvas Internet Explorer 9 Beta Guide: CSS3 2D Transforms http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_CSS3_2D_Transforms Beauty of the Web http://www.beautyoftheweb.com/ Canvas Pinball http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html
aggbug.aspx

More...
 
Back
Top