使用动画增强您的 Windows 应用程序体验
对于任何应用程序而言,最重要的一个方面是为用户提供体验。类似的应用程序如此之多,用户体验将成为您的应用程序和无数竞争对手之间的关键差异化因素。要使您的应用程序体验与其他应用程序区分开来,方法之一就是利用动画。在合理利用的情况下,动画不仅能够打造更为沉浸式的体验,还能得到更加实用和直观的体验。例如,通过为互动用户界面元素应用精巧的动画技术,用户即可自然而然地被其吸引,而不会疑惑如何使用您的功能。此外,用户对于应用程序体验的期待值也在不断提高。用户使用辛苦所得的钱购买带有新颖 GPU 的现代 PC 硬件,他们无疑期待所使用的应用程序能够利用到 GPU。
作为一名 Windows 开发人员,您已经习惯了开发体验方面的丰富选择。幸运的是,Windows API 在提供动画方面有着广泛的覆盖面。无论您是一名守旧的本机代码开发人员,还是在通过 Silverlight 或 HTML 创建 RIA,抑或是喜欢使用 .NET 框架和 WPF,都可以应用动画技术。此外,所有这些技术都可以无条件应用。作为一名开发人员,您不需要以底层硬件的具体功能为目标。您的应用程序将使用一致的方式编写,动画抽象能为现存的任何功能提供最佳支持。下一部分将介绍利用 Windows 中的动画支持的各种编程方法。
本机
在 C++ 中,动画抽象是 Windows Animation Manager。这是一组 COM 基元和实用工具类,构建于 DirectX 和 GDI+ 的基础之上。如果您不熟悉动画概念,这篇 MSDN 文章是一个不错的入门起点。MSDN 当然也提供了一些示例,涵盖了基本动画概念。除了基本示例之外,MSDN 还有一个名为 Hilo 的出色展示应用程序。除了触摸和任务栏集成等 Windows 7 概念之外,Hilo 还很好地利用动画改善了用户体验。
Silverlight/WPF/XAML
Silverlight 和 WPF 之间的实现细节可能有所不同,但两者公开的动画基元具有相同的对象模型和标记语言(XAML)。实际上,如果您对比两者的 MSDN 动画概览,则将发现它们极为相似(Silverlight/WPF)。Silverlight 和 WPF 相对于本机编程的关键优势之一就是利用 XAML,这为定义动画提供了声明式的语法。这允许更好地将业务逻辑从表示技术中分离出来,并允许设计人员和开发人员独立从事相同的项目。
Internet Explorer 9
Internet Explorer 9 通过 HTML5 画布元素和使用 CSS3 的 2D 变换提供 2D 动画支持。两种机制均采用硬件加速,能提供极为流畅的体验。您可以通过网络之美(Beauty of the Web)下载 IE9,开始利用这项支持。若要获得画布动画的出色演示,请查看我最喜爱的示例——Canvas Pinball。
参考资料
Windows Animation Manager | http://msdn.microsoft.com/en-us/library/dd371981%28VS.85%29.aspx |
Windows 动画概述 | http://msdn.microsoft.com/en-us/library/dd317017(v=VS.85).aspx |
Windows 动画示例 | http://msdn.microsoft.com/en-us/library/dd940528(v=VS.85).aspx |
Hilo:为 Windows 7 开发 C++ 应用程序 | http://msdn.microsoft.com/en-us/library/ff708696.aspx |
Silverlight 动画概述 | http://msdn.microsoft.com/en-us/library/cc189019(VS.95).aspx |
WPF 动画概述 | http://msdn.microsoft.com/en-us/library/ms752312.aspx |
Internet Explorer 9 Beta 指南:HTML5 画布元素 | http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_canvas |
Internet Explorer 9 Beta 指南:CSS3 2D 变换 | http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_CSS3_2D_Transforms |
网络之美 | http://www.beautyoftheweb.com/ |
Canvas Pinball | http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html |