XAML 的一个巧妙之处在于:您不仅可以使用 XML 语法声明对象,还可以用同样的方式定义要应用于这些对象的转换。您无需像编程人员一样旋转、移动和倾斜您的对象。并且,通过将动画定义为对象上随时间变化的属性,XAML 还可用于描述如何为对象设置动画效果。首先,我将介绍一下各种转换。然后介绍如何将这些转换添加到时间线以便为 Silverlight™ 内容设置动画。
转换
在图形字段中,转换可定义如何将点从一个坐标空间映射到另一个空间中。通常使用转换矩阵来描述转换,转换矩阵是一种特殊的数学构造,支持从一个系统向另一个系统进行简单的数学转换。Silverlight XAML 将此矩阵抽象化,并支持旋转、缩放、倾斜和平移(运动)四组转换。Silverlight XAML 还包含另外一种特殊的转换类型,使您可以定义和实现自己的矩阵,然后可使用此矩阵来合并其他转换。
因此,当使用 Brush 类型时,可以不同的方式定义转换。一种方式是使用 Brush.Transform 属性,这适用于您希望改变画笔内容的情况,例如,如果您想先旋转某图像,然后再在 ImageBrush 中使用该图像。另一种方式是使用 Brush.RelativeTransform 属性,该属性允许您使用相对值转换画笔,例如,当使用相同画笔绘制不同大小的区域时,您便可能需要使用相对值转换画笔。
最后,在使用用户界面 (UI) 元素时,可指定使用 RenderTransform 属性进行转换。例如,如果您正在转换一个椭圆,可使用 Ellipse.RenderTransform 定义所需的转换。
使用 RotateTransform 属性进行旋转
通过 RotateTransform,您可以绕指定的中心点将元素旋转一个指定的角度。使用 Angle 属性设置旋转角度以设置您希望将项目旋转多少度。要确定您自己的方向,可将指向右边的水平矢量视为 0 度,若按顺时针旋转,指向下的垂直矢量是旋转 90 度的结果。
@H_404_32@
可使用 CenterX 和 CenterY 属性设置转换的中心,从而指定中心点的坐标。默认为 0.0,因此默认旋转中心点位于容器的左上角。
在下面的 XAML 示例中,使用包含指定了 45 度旋转的 RotateTransform 的 RenderTransform 对 TextBlock 进行旋转:
在
图 1 中您可以看到,该文本围绕中心点 (0,0)(位于屏幕左上角)进行了旋转。
图 1
使用 RotateTransform 属性
下面的 XAML 演示了如何使用 CenterX 和 CenterY 围绕不同点进行旋转。在此示例中,围绕 (100,200) 点进行了旋转:
使用 ScaleTransform 属性进行缩放
使用 ScaleX 属性在水平轴(X 轴)上缩放对象,使用 ScaleY 属性在垂直轴(Y 轴)上缩放对象。这两个属性均设置为双精度值,该值代表在指定轴上将对象的当前大小与其相乘的值。因此,大于 1 的值可使对象扩大相应的倍数。例如,ScaleX 值为 2 可使该对象的水平大小加倍。大于 0 小于 1 的值将使对象缩小。例如,设置为 0.5 会使对象在指定维度上的大小减小一半。
例如,下面的 XAML 将创建一个宽 96 像素、高 88 像素的红色矩形:
图 2 演示了此对象在 Silverlight 中呈现时的外观。
图 2
呈现矩形(单击图像可查看大图)
要对此对象应用 ScaleTransform,可使用 RenderTransform 并将转换指定为 ScaleTransform。XAML 如下:
如果您熟悉编码,您会发现,使用 ScaleTransform,该矩形在水平上的大小扩展到了右侧。这是因为未指定缩放中心。您可以使用 CenterX 属性进行水平缩放或使用 CenterY 属性进行垂直缩放来指定缩放中心。这两个属性指定缩放中心的坐标。请注意,此坐标是相对于矩形左上角的。此外,默认坐标为 0,表示缩放会发生在水平轴的右侧和垂直轴的下侧。
如果将 CenterX 属性设置为正值(例如,50),则将绕 X 点将此矩形的最左端向右缩放 50 像素。这看起来像是 CenterX 未更改位置而矩形向左移动了一定的像素数(此大小取决于比例因子的大小)。这是因为拉伸是以该点为中心进行的,将此矩形的左侧向左推而将其右侧向右推。您可以利用相同的方式设置 ScaleY 和 CenterY 值以获得相似的效果:
使用 TranslateTransform 属性移动对象
平移是指在二维平面上将对象从一个位置移动到另一个位置的一种转换。可通过设置定义对象沿其 X 轴和 Y 轴移动的矢量来定义平移。可使用转换中的 X 属性和 Y 属性设置这些矢量。要将项目水平向右移动两个单位,可将 X 属性设置为 2,要将其水平向左移动,可使用负值,例如 -2。同样,要垂直移动对象,可使用 Y 属性,使用正值可使此对象向屏幕下方移动,而使用负值可使对象向屏幕上方移动。
下面是一个平移示例:通过指定 X 和 Y 值,将我们前面看到的红色矩形的位置向左上方移动。这些值有效地构成确定该平移的矢量:
结果如
图 3 所示。与
图 2 中矩形的位置相比,此矩形已移动到相对于该指定位置的左上方。
图 3
使用 TranslateTransform 属性(单击图像可查看大图)
使用 SkewTransform 属性倾斜对象
您可以围绕一个中心点沿 X 轴或 Y 轴倾斜一定的角度。当然,这两种方式可以合并起来使用,这样您就可以同时沿两个轴进行倾斜。以下 XAML 可将矩形沿 X 轴倾斜 45 度:
结果如
图 4 所示。
图 4
使用 SkewTransform 倾斜矩形(单击图像可查看大图)
图 5
使用三个倾斜的矩形模拟透视效果(单击图像可查看大图)
使用 MatrixTransform 定义转换
从本质上来说,所有转换都是通过将对象的坐标空间与转换矩阵相乘来执行的。到目前为止,您所看到的每一个转换都是我们熟知且定义明确的转换。矩阵数学和如何实现转换都超出了本文所要讨论的范围,但是为了语法的完整性,我将介绍如何在 Silverlight XAML 中定义它们。
请注意,MatrixTransform 中所用的矩阵都是仿射矩阵,这意味着此矩阵的最后一行始终设置为 (0 0 1),这样您仅需设置前二列。可使用转换的 Matrix 属性设置这些矩阵,该属性采用包含以空格分隔的前两行值的字符串。
合并转换
在上例中您可以看到,通过使用转换仿射矩阵及指定使用 MatrixTransform 类型可以创建复杂的转换。但是,如果您不是矩阵数学方面的专家,就需要适用于使用转换的另一项技术,即通过 TransformGroup 元素将上述两步合并。这样,您只需要指定多个转换,并将每个转换的合并效果都应用到此对象即可。以下是一个示例:
在 XAML 中,可通过随着时间更改项目的一个或多个属性为其设置动画效果。此时间是使用时间线定义的。例如,要在 5 秒内将项目移过屏幕,应将时间线指定为 5 秒,设置 Canvas.Left 属性在此时间内从 0 变为屏幕宽度的动画效果。在下面的部分中,我将介绍每种可用的动画类型,以及使用关键帧设置这些属性的动画效果时的区别。
在了解不同的动画类型之前,您应该知道动画的框架中包括 Trigger、EventTrigger 和 Storyboard。但是,首先我将介绍以下基本概念,然后再详细讲解不同的动画类型。
使用触发器和事件触发器
Silverlight 中的动画为了响应使用触发器定义的事件而发生。目前,Silverlight XAML 中仅支持一种触发器类型,即 EventTrigger。每个 UI 属性都具有一个 Triggers 集合,用来定义一个或多个触发器(即一个或多个 EventTrigger)。
因此,将动画添加到元素的第一步是定义其 Trigger 集合;然后需要向您已创建的集合中至少添加一个 EventTrigger。例如,如果您正在为一个矩形设置动画,第一步(指定 Triggers 集合)应如下所示:
接下来,您需要定义一个 EventTrigger 并将其添加到此集合。在这个 EventTrigger 中,使用 RoutedEvent 属性指定动画运行所响应的事件。请注意,RoutedEvent 仅支持 Loaded 事件。
要实现加载矩形时开始的动画,应指定 EventTrigger,如下所示:
运行此动画的 XAML 代码段如下所示:
下一个步骤是定义您希望使用的动画。动画包含在 Storyboards 内。
使用 BeginStoryboard 和 Storyboard
BeginStoryboard 是一个包含 Storyboard 对象的触发器操作。Storyboard 对象包含动画定义。当定义动画时,您只需在 EventTrigger 定义内嵌入这些对象。以下代码通过矩形示例演示了如何实现此操作:
定义动画参数
现在动画的框架已建立,您可以指定希望执行的动画。从最根本上来讲,动画是定义如何随时间更改某个属性。您可为三种不同的属性类型设置动画效果。其中的每个属性类型从 From 属性中指定的值(如果尚未设置,则使用当前值)开始设置动画效果,到 To 属性中指定的值结束或者到 By 属性中指定的值结束。
Double 类型 使用 DoubleAnimation 或 DoubleAnimationUsingKeyFrames 为其设置动画效果。此方法用于为包含双精度值的属性(例如,Canvas.Left 等维度属性或不透明度等可视化属性)设置动画效果。
Point 类型 使用 PointAnimiation 或 PointAnimationUsingKeyFrames 类型为其设置动画效果。此特定方法用于为包含点值的属性(例如使用点定义的线段或曲线)设置动画效果。
Color 类型 使用 ColorAnimation 或 ColorAnimationUsingKeyFrames 类型动画为其设置动画效果。此方法用于为包含颜色值的属性(例如元素的背景或笔画)设置动画效果。
确定对其应用动画效果的目标
要定义您希望对其应用动画的对象,可在这些动画类型中使用 Storyboard.TargetName 属性,并将目标对象的名称传递给该属性(此名称在该对象上使用 x:Name 属性进行设置)。另外,还需要使用 Storyboard.TargetProperty 指定要对其设置动画效果的属性。请注意,如果要指定复杂属性或附加属性(如 Canvas.Left),应将其放在括号内。因此,举例来说,要指定 Double 动画效果以对名为 rect 的矩形使用 Canvas.Left 属性,所得到的 XAML 如下所示:
设置动画属性
要定义将目标属性从一个值转换到另一个值所用的时间,可使用 Duration 属性。请注意,此属性定义为 HH:MM:SS 格式,例如,如果动画的持续时间为 5 秒,则指定为 00:00:05,缩写为 0:0:5。
如果您不希望动画立即开始,可使用 BeginTime 属性和相同的语法插入延迟:
您还可以通过将持续时间与对比速率相乘来调整动画行为。可使用 Spee@R_502_6118@io 属性完成此操作。例如,上一示例将持续时间设置为 5 秒。您可以通过将 Spee@R_502_6118@io 设置为 2 来更改对比速率,使该动画持续 10 秒;或者通过将 Spee@R_502_6118@io 设置为 0.2 来加快动画的速度,使动画在 1 秒内完成。
Silverlight 动画提供了一项功能,可以撤消对部分动画所作的更改。例如,如果在特定的时间内将双精度值从 0 移动至 500,AutoReverse 会使动画从 500 移回 0。
设置 RepeatBehavior 属性
- 以秒为单位定义的时间。时间线会等待这段时间过后再次演示动画。
- 为实现不断重复而设置为 Forever 的重复行为。
- 通过指定后面带有 x 的数字设置的离散重复数。例如,如果您希望该动画运行 3 次,则指定值 3x。
图 6 演示了一段完整的 XAML,可以将设置动画效果的矩形从 X 轴上的 100 移动至 500,再移回 100,然后将此行为重复 3 次:
让我们稍微详细地介绍一下其中的每个动画类型。首先,我会介绍设置各种类型的动画分别需要的属性,然后介绍与图像想适应的相关动画关键帧类型。
使用 DoubleAnimation 设置值动画效果
设置双精度值动画效果时,可以在动画开始时使用 From 值指定该值,然后将其更改为 To 值(绝对目标),或更改为 By 值(相对目标)。例如,如果要将某个项目的 Canvas.Left 属性从 100(接近屏幕的左端)移动至 500,您可以将 From 值设置为 100,将 To 值设置为 500 或将 By 值设置为 400。请注意,如果您同时设置了 To 值和 By 值,则优先采用 To 属性,而忽略 By 属性。同样,如果此矩形已经位于 From 的目标位置,则不需要再指定 From 属性。
上一个 XAML 示例演示了此行为。此矩形位于 Canvas.Left 值为 100 的位置,而 DoubleAnimation 将 To 值指定为 500。因此,该动画会将该值从 100 移动至 500,这将使此矩形一直移动到屏幕的右侧。
使用 ColorAnimation 设置颜色动画效果
ColorAnimation 的使用方式与 DoubleAnimation 类似。您可以使用它指定元素的颜色值如何随时间更改。这样,动画会在指定的时间内作为颜色值间的线性插值进行计算。
设置颜色动画效果时,可以在动画开始时使用 From 属性指定该值。如果不指定此值,则会使用当前的颜色。可使用 To 属性指定所需的结束颜色。还可以指定 By 属性,它提供的结束颜色是将 From 颜色(或开始颜色)值与 By 颜色值相加的最终结果。
在您为基于颜色的属性设置动画效果时,不要直接为该属性的内容设置动画效果,因为该属性的内容通常是画笔而不是颜色。因此,举例来说,如果您希望使某个矩形的填充颜色具有动画效果,就不应将此矩形的 Fill 属性作为目标属性,而应指定用于执行填充行为的 SolidBrush 的 Color 属性。
图 7 中的示例演示了如何使矩形的颜色具有动画效果:使用颜色动画,在 5 秒内将该矩形的颜色由黑色变为白色。在代码中您可以看到,此 XAML 代码段指定了 SolidColorBrush 的 Color 属性,从而以目标属性填充了该图形。请注意,这是解决类似这种情况中复杂属性所使用的典型 XAML 语法。
使用 PointAnimation 设置点的动画效果
要更改随时间而定义为点的值,需要使用 PointAnimation 类型。这样,动画会在指定的时间内作为两个值之间的线性插值进行计算。
与设置 Color 和 Double 动画效果的方法类似,您可以使用 From 指定开始值,使用 By 将目标指定为相对方向,或使用 To 将目标指定为绝对点。
图 8 中的示例演示了如何使贝塞尔曲线的终点具有动画效果。在此示例中,该贝塞尔曲线将起点定义在 (100,100),终点定义在 (300,100),控制点定义在 (200,0)。动画设置为在加载该曲线后触发,设置该曲线的终点 (Point2) 从 (300,100) 更改为 (300,600) 的动画效果的持续时间为 5 秒。