基于Silverlight 的网页动画开发的研究
摘要： Silverlight 是微软近年推出的Web 前端技术，采用它进行网页开发成为程序员除了FLASH 外新的选择。首先讨论了Silverlight 的特点和开发技术与XAML 语言。在此基础上对基于Silverlight 技术进行网页动画开发进行了分析。重点探讨了基于Silverlight 对页面元素进行二维和三维应用变换的方法。
关键词：Silverlight；XAML；动画；变换
1. 引 言
长期以来，在网页动画和网页游戏技术上占统治地位的是FLASH技术。然而微软在2007年9 月发布Silverlight1.0，随后又分别发布了2.0，3.0 和4.0。并且还发布了用于开发Silverlight应用的工具包Expression Studio。并且在其不断发展中，很多新的特性被加入。基于Silverlight进行网页动画的开发成为一种新的选择。
本文对基于 Silverlight 进行网页动画开发进行了研究。
2. Silverlight 概述
WPF 是微软近年推出的展示层开发框架，Silverlight 的前身代号是“WPF/E”，也就是其Everywhere 版本。微软从2007 年到2010 年发布了Silverlight 的4 个版本。它作为一个浏览器插件，可以显示矢量图形、动画和视频。要运行Silverlight 就必须安装Microsoft 发布的插件。
Silverlight 是一种跨浏览器、跨平台的技术。它能够在常见的Web 浏览器中运行，包括IE、Firefox、Apple safari，并可以在Windows 和Apple Mac 平台上运行。
Silverlight 是类似于Flash 的解决方案。Silverlight 和Flash 的主要区别是：一个Silverlight程序并不是传递给Flash 的播放器的一个编译好的二进制文件。相反，所有的代码都是基于标准的，且图像使用了XAML。Silverlight 最值得关注之处在于，实际上就是它创建出的UI 质量，它是真正以XAML 格式进行数据传输，到用户前端后再解析为具体图像，文本的大小是非常小的，所以不会占用太多带宽。
Silverlight 在安全边界(沙盒)中运行，无法采用与传统的.NET 应用程序相同的方式访问文件系统和其他的系统资源。默认情况下，限制对承载Silverlight 插件的HTML 页的访问。
3. Silverlight 技术框架
Silverlight 平台作为一个整体，由两个主要部分以及一个安装程序和更新组件组成。
3.1 核心表示层框架
核心表示层框架是面向 UI 和用户交互的组件和服务（包括用户输入（Inputs）、用于Web 应用程序的轻量型 UI 控件、媒体播放（Media）、数字版权管理（DRM）、数据绑定以及表示层功能（UI Core），包括矢量图形、文本、动画和图像。此外还包括用于指定布局的可扩展应用程序标记语言 (XAML)。
3.2 .NET Framework for Silverlight
.NET Framework for Silverlight 是包含组件和类库的.NET Framework 的子集，包括数据集成、可扩展的Windows 控件、网络、基类库、公共语言运行时（CLR）。其中的部分组件随着应用程序一起发布。这些Silverlight 类库没有包含在Silverlight 运行时中，而是包含在SDK 中。如果在应用程序中用到了这些Silverlight 类库，这些类库就随着应用程序打包下载到用户浏览器，这些类库包括UI 控件、XLINQ、Syndication（RSS/Atom）、XML 序列化和动态语言运行时。
3.3 安装程序和更新程序
安装程序和更新程序是一个安装和更新控件，可以简化用户首次安装该应用程序的过程，以后可以提供自动更新。
4. 创建动画
在 Silverlight 中可以很好的进行动画开发。从编程角度看，Silverlight 程序使用的是.NET托管代码，可以用XAML 编写，XAML 是微软为Windows Vista 创建的基于XML 的标记语言。它提供了对动画和3D 众多方面的支持。XAML 可以用最简单的文本编辑器编写，也可以使用图形工具（如Expression Blend）来创建XAML 代码。
在 Silverlight 的动画设计中，用故事板管理时间线。另外动画类型分为两类：分别是线性插值动画（Linear Interpolation）和关键帧动画（Key-frame Animation）。
4.1 线性插值动画
在线性插值动画中只要设置动画开始值（From），动画终止值（To）和动画相对改变值（By），就可以实现动画效果。其中From 是动画在时间线中的开始位置，To 是设置动画在时间线上的结束位置，By 和To 类似，但比To 更灵活一些，设置By 不用关心具体属性数值改变，也不用关心动画具体经历的时长。该动画类型，只是三种动画数据类型类，分别是：DoubleAnimation、ColorAnimation 和PointAnimation。这三种类型类，分别用于Double数据类型，Color 数据类型和Point 数据类型。
4.2 关键帧动画
关键帧动画相比线性插值动画要更加灵活和强大。在关键帧动画中，可以不用指定具体的开始点和结束点，仅需设置关键帧和相关动画控制方法，Silverlight 将自动生成动画效果，这个动画类型有两个重要概念，关键帧和动画控制方法。关键帧就是对象属性值，每设置一个关键帧，也就是修改一次对象属性值。动画控制方法就是动画过渡效果。默认提供三种过渡效果：线性（Linear）、离散（Discrete）和样条（Spline）。关键帧动画也有相应的数据类型类， 分别是DoubleAnimationUsingKeyFrames 、ColorAnimationUsingKeyFrames ，PointAnimationUsingKeyFrames 和ObjectAnimationUsingKeyFrames,其中前三种数据类型类和线性插值中对应三种类的相同。ObjectAnimationUsingKeyFrames 是关键帧动画特有的数据类型类，可以替代任何数据类型。
4.3 故事板故事板（StoryBoard）是管理时间线的类，可以使用该类管理和控制多个动画进程。如控制动画的播放、暂停、停止或者改变动画位置等功能，不仅如此，通过Storyboard 还可以为动画指定控件和属性。
线性插值动画、关键帧动画和故事板是Silverlight 中支持动画的主要的类，它们都继承System.Windows.Media.Animation.Timeline。
5. 应用变换
5.1 二维变换
Silverlight 包含了二维变换元素，可以改变元素的尺寸和位置。还可以通过变换改变元素，如旋转或使它们倾斜。
在图形字段中，转换可以定义为如何将一个坐标空间映射到另一个空间中。通常使用转换矩阵来描述转换，支持从一个系统向另一个系统进行简单的数学转换。Silverlight XAML将这个矩阵抽象化，并支持旋转、缩放、倾斜和平移四种转换。Silverlight XAML 还包含另外一种特殊的转换，可以定义和实现自己的矩阵，然后使用这个矩阵来合并其他转换。
RotateTransform：使元素进行旋转，绕指定的中心点将元素旋转一个指定的角度。
ScaleTransform：基于水平轴、垂直轴，或同时基于这两个轴更改元素大小。
SkewTransform：使一个元素按照某一个轴或原点倾斜。
TranslateTransform：将元素在平面上平移。
MatrixTransform：这是一种低级机制，能创建自定义的2D变换。
5.2 准三维变换
WPF 支持三维变换，而Silverlight 不支持真正的3D。在Silverlight 3中增加了新的特性透视变换PerspectiveTransform，可以让用户模拟在三维空间中的旋转。这并不是真正的3D我们把它称为准三维变换。透视变换能够使人感到对象朝向或者远离观察者进行旋转。
Matrix3DProjection 和Matrix3D 类型用于更复杂的准3D方案，其中前者是后者的子类。要使用这些类，需要编写代码，以便正确地创建3D 变换矩阵。另外还可以使用PlaneProject进行变换。
6. 总 结
几年来，Silverlight 发布了第1版到第4版。其对动画的支持越来越强大，并且开始支持脱离浏览器的动画应用。考虑到Silverlight 采用C#等技术方面的优势，很多开发人员都被吸引到Silverlight 的动画开发中来。随着网页游戏的流行，相信Silverlight 在网页动画开发方面能够得到更为广泛的应用。
人次