expressionblend:Silverlight: 使用 XAML 和 Expression Blend 创建动画

　　本文将介绍以下内容:

　　基本转换和合并转换

　　使用触发器和事件

　　线性关键帧动画和离散关键帧动画

　　使用 Expression Blend 制作动画

　　本文使用以下技术:

　　Silverlight 2、Expression Blend 　　本文基于 Silverlight 2 预发布版本文中所有信息均有可能发生变更本文是根据 Laurence Moroney Microsoft Silverlight 2 介绍第 2 版(Microsoft Press2008)改编

目录

　　转换

　　使用 RotateTransform 属性进行旋转

　　使用 ScaleTransform 属性进行缩放

　　使用 TranslateTransform 属性移动对象

　　使用 SkewTransform 属性倾斜对象

　　使用 MatrixTransform 定义转换

　　合并转换

　　动画

　　使用触发器和事件触发器

　　使用 BeginStoryboard 和 Storyboard

　　定义动画参数

　　确定对其应用动画效果目标

　　设置动画属性

　　设置 RepeatBehavior 属性

　　使用 DoubleAnimation 设置值动画效果

　　使用 ColorAnimation 设置颜色动画效果

　　使用 PoAnimation 设置点动画效果

　　使用关键帧

　　使用线性关键帧

　　使用离散关键帧

　　使用 Spline 关键帧

　　动画和 Expression Blend

　　结束语

　　XAML 个巧妙的处在于:您不仅可以使用 XML 语法声明对象还可以用同样方式定义要应用于这些对象转换您无需像编程人员样旋转、移动和倾斜您对象并且通过将动画定义为对象上随时间变化属性XAML 还可用于描述如何为对象设置动画效果首先我将介绍下各种转换然后介绍如何将这些转换添加到时间线以便为 Silverlight™ 内容设置动画

　　转换

　　在图形字段中转换可定义如何将点从个坐标空间映射到另个空间中通常使用转换矩阵来描述转换转换矩阵是种特殊数学构造支持从个系统向另个系统进行简单数学转换Silverlight XAML 将此矩阵抽象化并支持旋转、缩放、倾斜和平移(运动) 4组转换Silverlight XAML 还包含另外种特殊转换类型使您可以定义和实现自己矩阵然后可使用此矩阵来合并其他转换

　　转换是通过转换属性应用存在多种区别类型转换属性可应用于区别对象类型

　　因此当使用 Brush 类型时可以区别方式定义转换种方式是使用 Brush.Transform 属性这适用于您希望改变画笔内容情况例如如果您想先旋转某图像然后再在 ImageBrush 中使用该图像另种方式是使用 Brush.RelativeTransform 属性该属性允许您使用相对值转换画笔例如当使用相同画笔绘制区别大小区域时您便可能需要使用相对值转换画笔

　　使用 Geometry 类型时可使用 Geometry.Transform 属性进行简单转换但请记住此类型不支持相对转换

　　最后在使用用户界面 (UI) 元素时可指定使用 RenderTransform 属性进行转换例如如果您正在转换个椭圆可使用 Ellipse.RenderTransform 定义所需转换

　　使用 RotateTransform 属性进行旋转

　　通过 RotateTransform您可以绕指定中心点将元素旋转个指定角度使用 Angle 属性设置旋转角度以设置您希望将项目旋转多少度要确定您自己方向可将指向右边水平矢量视为 0 度若按顺时针旋转指向下垂直矢量是旋转 90 度结果

　　可使用 CenterX 和 CenterY 属性设置转换中心从而指定中心点坐标默认为 0.0因此默认旋转中心点位于容器左上角

　　在下面 XAML 举例中使用包含指定了 45 度旋转 RotateTransform RenderTransform 对 TextBlock 进行旋转: <TextBlock Width="320" Height="40"
　Text="This is the text to rotate" TextWrapping="Wrap">
　<TextBlock.RenderTransform>
　　<RotateTransform Angle="45" />
　</TextBlock.RenderTransform>
</TextBlock>

　　在图 1 中您可以看到该文本围绕中心点 (0,0)(位于屏幕左上角)进行了旋转

　　图 1 使用 RotateTransform 属性下面 XAML 演示了如何使用 CenterX 和 CenterY 围绕区别点进行旋转在此举例中围绕 (100,200) 点进行了旋转:

TextBlock Width="320" Height="40"
　Text="This is the text to rotate" TextWrapping="Wrap" >
　<TextBlock.RenderTransform>
　　<RotateTransform Angle="45" CenterX="100" CenterY="200" />
　</TextBlock.RenderTransform>
</TextBlock>

　　使用 ScaleTransform 属性进行缩放

　　ScaleTransform 属性用于基于水平轴、垂直轴或同时基于这两个轴更改对象大小如果缩放对象至少需要指定其中个绕其进行缩放轴同时还要指定希望针对该轴缩放比例

　　使用 ScaleX 属性在水平轴(Ｘ 轴)上缩放对象使用 ScaleY 属性在垂直轴(Ｙ 轴)上缩放对象这两个属性均设置为双精度值该值代表在指定轴上将对象当前大小和其相乘值因此大于 1 值可使对象扩大相应倍数例如ScaleX 值为 2 可使该对象水平大小加倍大于 0 小于 1 值将使对象缩小例如设置为 0.5 会使对象在指定维度上大小减小半

　　例如下面 XAML 将创建个宽 96 像素、高 88 像素红色矩形: <Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88"
　Canvas.Left="112" Canvas.Top="72" />

　　图 2 演示了此对象在 Silverlight 中呈现时外观

　　图 2 呈现矩形

　　要对此对象应用 ScaleTransform可使用 RenderTransform 并将转换指定为 ScaleTransformXAML 如下: <Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88" Canvas.Left="112" Canvas.Top="72">
　<Rectangle.RenderTransform>
　　<ScaleTransform ScaleX="2" />
　</Rectangle.RenderTransform>
</Rectangle>

　　如果您熟悉编码您会发现使用 ScaleTransform该矩形在水平上大小扩展到了右侧这是未指定缩放中心您可以使用 CenterX 属性进行水平缩放或使用 CenterY 属性进行垂直缩放来指定缩放中心这两个属性指定缩放中心坐标请注意此坐标是相对于矩形左上角此外默认坐标为 0表示缩放会发生在水平轴右侧和垂直轴下侧

　　如果将 CenterX 属性设置为正值(例如50)则将绕 X 点将此矩形最左端向右缩放 50 像素这看起来像是 CenterX 未更改位置而矩形向左移动了定像素数(此大小取决于比例因子大小)这是拉伸是以该点为中心进行将此矩形左侧向左推而将其右侧向右推您可以利用相同方式设置 ScaleY 和 CenterY 值以获得相似效果: <Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88"
　Canvas.Left="80" Canvas.Top="80">
　<Rectangle.RenderTransform>
　　<ScaleTransform ScaleX="2"
　　　CenterX="50"/>
　</Rectangle.RenderTransform>
</Rectangle>

　　使用 TranslateTransform 属性移动对象

　　平移是指在 2维平面上将对象从个位置移动到另个位置种转换可通过设置定义对象沿其 X 轴和 Y 轴移动矢量来定义平移可使用转换中 X 属性和 Y 属性设置这些矢量要将项目水平向右移动两个单位可将 X 属性设置为 2要将其水平向左移动可使用负值例如 -2同样要垂直移动对象可使用 Y 属性使用正值可使此对象向屏幕下方移动而使用负值可使对象向屏幕上方移动

　　下面是个平移举例:通过指定 X 和 Y 值将我们前面看到红色矩形位置向左上方移动这些值有效地构成确定该平移矢量: <Rectangle Fill="#FFFF0404"
　Stroke="#FF000000"
　Width="96" Height="88"
　Canvas.Left="80" Canvas.Top="80">
　<Rectangle.RenderTransform>
　　<TranslateTransform X="-50" Y="-50"/>
　</Rectangle.RenderTransform>
</Rectangle>

　　结果如图 3 所示和图 2 中矩形位置相比此矩形已移动到相对于该指定位置左上方

　　图 3 使用 TranslateTransform 属性

　　使用 SkewTransform 属性倾斜对象

　　倾斜对象包括沿某轴以渐进、统方式进行更改这会产生将个正方形或矩形变成平行 4边形效果在 2维表面上创建深度效果时这种视觉效果很有用

　　您可以围绕个中心点沿 X 轴或 Y 轴倾斜定角度当然这两种方式可以合并起来使用这样您就可以同时沿两个轴进行倾斜以下 XAML 可将矩形沿 Ｘ 轴倾斜 45 度: <Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88"
　Canvas.Left="80" Canvas.Top="80">
　　 <Rectangle.RenderTransform>
　　　 <SkewTransform AngleX="45"/>
　　 </Rectangle.RenderTransform>
　 </Rectangle>

　　结果如图 4 所示

　　图 4 使用 SkewTransform 倾斜矩形

　　倾斜对于在图形中模拟 3维效果很有帮助例如您可以将 SkewTransform 应用到 3个相邻矩形(两个沿 Ｘ 轴倾斜个沿 Ｙ 轴倾斜)来创建个 3维透视效果(请参见图 5)

　　图 5 使用 3个倾斜矩形模拟透视效果

　　使用 MatrixTransform 定义转换

　　从本质上来说所有转换都是通过将对象坐标空间和转换矩阵相乘来执行到目前为止您所看到每个转换都是我们熟知且定义明确转换矩阵数学和如何实现转换都超出了本文所要讨论范围但是为了语法完整性我将介绍如何在 Silverlight XAML 中定义它们

　　请注意MatrixTransform 中所用矩阵都是仿射矩阵这意味着此矩阵最后行始终设置为 (0 0 1)这样您仅需设置前 2列可使用转换 Matrix 属性设置这些矩阵该属性采用包含以空格分隔前两行值串 <Rectangle Fill="#FFFF0404"
　　 Stroke="#FF000000"
　　 Width="96" Height="88"
　　 Canvas.Left="80" Canvas.Top="80">
　　 <Rectangle.RenderTransform>
　　　 <MatrixTransform Matrix="1 0 1 2 0 1"/>
　　 </Rectangle.RenderTransform>
　 </Rectangle>

　　使用此矩阵进行转换效果是呈现个经过拉伸和倾斜双重转换矩形

　　合并转换

　　在上例中您可以看到通过使用转换仿射矩阵及指定使用 MatrixTransform 类型可以创建复杂转换但是如果您不是矩阵数学方面专家就需要适用于使用转换另项技术即通过 TransformGroup 元素将上述两步合并这样您只需要指定多个转换并将每个转换合并效果都应用到此对象即可以下是个举例: <Rectangle Fill="#FFFF0404" Stroke="#FF000000"
　Width="96" Height="88"
　Canvas.Left="80" Canvas.Top="80">
　<Rectangle.RenderTransform>
　　<TransformGroup>
　　　<ScaleTransform ScaleX="1.2" ScaleY="1.2" />
　　　<SkewTransform AngleX="30" />
　　　<RotateTransform Angle="45" />
　　</TransformGroup>
　</Rectangle.RenderTransform>
</Rectangle>

　　此举例中合并了个 ScaleTransform该效果将图形大小在两个轴上各增加 20%在 X 轴上倾斜 30 度并旋转 45 度

　　“动画”字面上意思是指“为某物赋和生命”因此借助动画您可以通过在段时间内或响应用户操作而更改对象属性(如颜色、大小、不透明度及其他属性)来为自己作品带来生命力

　　在 XAML 中可通过随着时间更改项目个或多个属性为其设置动画效果此时间是使用时间线定义例如要在 5 秒内将项目移过屏幕应将时间线指定为 5 秒设置 Canvas.Left 属性在此时间内从 0 变为屏幕宽度动画效果在下面部分中我将介绍每种可用动画类型以及使用关键帧设置这些属性动画效果时区别

　　在了解区别动画类型的前您应该知道动画框架中包括 Trigger、EventTrigger 和 Storyboard但是首先我将介绍以下基本概念然后再详细讲解区别动画类型

　　使用触发器和事件触发器

　　Silverlight 中动画为了响应使用触发器定义事件而发生目前Silverlight XAML 中仅支持种触发器类型即 EventTrigger每个 UI 属性都具有个 Triggers 集合用来定义个或多个触发器(即个或多个 EventTrigger)

　　因此将动画添加到元素第步是定义其 Trigger 集合；然后需要向您已创建集合中至少添加个 EventTrigger例如如果您正在为个矩形设置动画第步(指定 Triggers 集合)应如下所示: <Rectangle x:Name="rect" Fill="Red"
　Canvas.Top="100" Canvas.Left="100"
　Width="100" Height="100">
　<Rectangle.Triggers>
　</Rectangle.Triggers>
</Rectangle>

　　接下来您需要定义个 EventTrigger 并将其添加到此集合在这个 EventTrigger 中使用 RoutedEvent 属性指定动画运行所响应事件请注意RoutedEvent 仅支持 Loaded 事件

　　要实现加载矩形时开始动画应指定 EventTrigger如下所示: <EventTrigger RoutedEvent="Rectangle.Loaded">
</EventTrigger>

　　运行此动画 XAML 代码段如下所示: <Rectangle x:Name="rect" Fill="Red" Canvas.Top="100"
　Canvas.Left="100" Width="100" Height="100">
　<Rectangle.Triggers>
　　<EventTrigger RoutedEvent="Rectangle.Loaded">
　　</EventTrigger>
　</Rectangle.Triggers>
</Rectangle>

　　下个步骤是定义您希望使用动画动画包含在 Storyboards 内

　　使用 BeginStoryboard 和 Storyboard

　　BeginStoryboard 是个包含 Storyboard 对象触发器操作Storyboard 对象包含动画定义当定义动画时您只需在 EventTrigger 定义内嵌入这些对象以下代码通过矩形举例演示了如何实现此操作: <Rectangle x:Name="rect" Fill="Red"
　Canvas.Top="100" Canvas.Left="100"
　Width="100" Height="100">
　<Rectangle.Triggers>
　　<EventTrigger RoutedEvent="Rectangle.Loaded">
　　　<BeginStoryboard>
　　　　<Storyboard>
　　　　</Storyboard>
　　　</BeginStoryboard>
　　</EventTrigger>
　</Rectangle.Triggers>
</Rectangle>

　　定义动画参数

　　现在动画框架已建立您可以指定希望执行动画从最根本上来讲动画是定义如何随时间更改某个属性您可为 3种区别属性类型设置动画效果其中每个属性类型从 From 属性中指定值(如果尚未设置则使用当前值)开始设置动画效果到 To 属性中指定值结束或者到 By 属性中指定值结束

　　Double 类型 使用 DoubleAnimation 或 DoubleAnimationUsingKeyFrames 为其设置动画效果此思路方法用于为包含双精度值属性(例如Canvas.Left 等维度属性或不透明度等可视化属性)设置动画效果

　　Po 类型 使用 PoAnimiation 或 PoAnimationUsingKeyFrames 类型为其设置动画效果此特定思路方法用于为包含点值属性(例如使用点定义线段或曲线)设置动画效果

　　Color 类型 使用 ColorAnimation 或 ColorAnimationUsingKeyFrames 类型动画为其设置动画效果此思路方法用于为包含颜色值属性(例如元素背景或笔画)设置动画效果

　　确定对其应用动画效果目标

　　要定义您希望对其应用动画对象可在这些动画类型中使用 Storyboard.TargetName 属性并将目标对象名称传递给该属性(此名称在该对象上使用 x:Name 属性进行设置)另外还需要使用 Storyboard.TargetProperty 指定要对其设置动画效果属性请注意如果要指定复杂属性或附加属性(如 Canvas.Left)应将其放在括号内因此举例来说要指定 Double 动画效果以对名为 rect 矩形使用 Canvas.Left 属性所得到 XAML 如下所示: <DoubleAnimation Storyboard.TargetName="rect"
　Storyboard.TargetProperty="(Canvas.Left)" />

　　设置动画属性

　　要定义将目标属性从个值转换到另个值所用时间可使用 Duration 属性请注意此属性定义为 HH:MM:SS 格式例如如果动画持续时间为 5 秒则指定为 00:00:05缩写为 0:0:5 <DoubleAnimation Storyboard.TargetName="rect"
　Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:5" />

　　如果您不希望动画立即开始可使用 BeginTime 属性和相同语法插入延迟: <DoubleAnimation Storyboard.TargetName="rect"
　Storyboard.TargetProperty="(Canvas.Left)" BeginTime="0:0:5" />

　　您还可以通过将持续时间和对比速率相乘来调整动画行为可使用 SpeedRatio 属性完成此操作例如上举例将持续时间设置为 5 秒您可以通过将 SpeedRatio 设置为 2 来更改对比速率使该动画持续 10 秒；或者通过将 SpeedRatio 设置为 0.2 来加快动画速度使动画在 1 秒内完成 <DoubleAnimation Storyboard.TargetName="rect"
　Storyboard.TargetProperty="(Canvas.Left)"
　SpeedRatio="2" Duration="0:0:5" />

延伸阅读

• 2009-1-23-- app.xaml:Xaml解析时抛出OutOfMemoryException
• 2009-2-12-- alphablend:可能是最快的算法alpha blend汇编源代码 Intel官方提供