SilverLight FAQ 第 2 部分（动画和变换）

Shivprasad koirala

4.13/5 (6投票s)

2009 年 6 月 1 日

CPOL

7分钟阅读

57338

Silverlight 中的动画和变换

更新：其他 SilverLight FAQ 的链接已移至本文底部。

使用 Silverlight 演示单向、双向和单次绑定的视频

引言和目标
关于 Silverlight 流传的一些新闻
从 Silverlight 的角度来看，动画的定义是什么？
Silverlight 中的时间轴是什么？
Silverlight 支持哪些不同类型的动画？
你能解释一下 doubleanimation、coloranimation 和 pointanimation 吗？
什么是故事板（Storyboard）？
我们能看一个简单的 Silverlight 动画来入门吗？
Silverlight 进行转换有哪些不同的方式？
Silverlight 与 Flash：好消息和坏消息
其他 Silverlight FAQ
历史

引言和目标

本 FAQ 完全致力于使用 SilverLight 进行动画和转换。教程从时间轴和故事板等动画基础知识开始。之后，文章继续讨论支持的不同动画，最后以一个简单的矩形动画结束教程。

关于 Silverlight 流传的一些新闻

我知道我需要专注于技术文章，但我仍然发现了一些有趣的东西可以分享关于 Silverlight 的成就和新闻，只是觉得应该分享一下。如果您仍然认为 Silverlight 不值得投入精力，那么以下一些新闻会让您兴奋起来。

Silverlight 安装量达到 3 亿，与已经存在多年的 Flash 相比，这个数字不坏。我们并非试图低估 Flash，但 Flash 的起步确实不那么好。
噢，Silverlight 覆盖了上一届奥运会和 NBC。
3000 名开发人员和设计师支持这项举措。
Netflix 首席执行官 Reed Hastings 加入微软董事会。

仍然不信服？请阅读本文末尾的详细报告这里。好的，为了不显得偏颇，我也涵盖了一些 Silverlight 的坏消息。

从 Silverlight 的角度来看，动画的定义是什么？

动画是在一段时间内对一个值进行修改。由于在一段时间内对值进行修改，它会产生动画的错觉。例如，您可以放置一个圆，并修改 'Canvas.Right' 属性以创建向右移动圆的动画。

图示：Canvas 右侧方向

Silverlight 中的时间轴是什么？

时间代表动画将进行的某个时间段/单位。时间单位可以是秒、分钟或小时。单位取决于动画的性质。'System.Windows.Media.Animation.Timeline' 类代表时间线。

如前所述，动画就是从一个起始值移动到一个新值，从而产生错觉。Silverlight 使用三个属性来实现：'From'、'To' 和 'By'。'From' 指定动画的开始，'To' 指定动画应运行到哪里。'By' 是相对动画。当我们指定 'From' 和 'By' 时，动画将从 'From' 属性指定的值进行，直到 'From' 和 'By' 属性的总和指定的值。

图示：不同类型的动画

现在，再次使用 'From'、'By' 和 'To'，您可以获得线性动画，也可以获得非线性动画。在线性动画中，一切都很直接，而非线性动画则根据动画需求进行更改。

图示：线性与非线性

你能解释 doubleanimation、coloranimation 和 pointanimation 吗？

如前一问题所述，Silverlight 动画就是为属性指定 'From'、'To' 和 'By' 值。现在该属性可以是简单的双精度值，可以是颜色，也可以是点。Silverlight 将这些属性分为三个类别，如下所述：

'DoubleAnimation' 使用具有双精度值的属性，例如 Rectangle.Height 或 width。您可以使用 'From'、'To' 和 'By' 来指定双精度值。
'PointAnimation' 使用点值，即线段和曲线的 X、Y 值。
'ColorAnimation' 有助于改变对象的颜色值。

什么是故事板（Storyboard）？

Storyboard 是一个由快照/草图组成的序列，描绘了随时间变化的场景。您可以将故事板视为我们在先前问题之一中讨论过的时间线。故事板包含一组动画。动画集合是存在的，因为故事板使用草图来描绘一段时间内的变化。

例如，您可以在下面的动画中看到使用了四个草图来描绘两个箭的碰撞，并在最后发出“砰砰”声。所以基本上，storyboard 将包含四个动画对象，这些对象将在一段时间内快速显示。

图示：箭的草图

我们能看一个简单的 Silverlight 动画来入门吗？

让我们创建一个简单的动画，如下所示。我们将创建一个矩形对象，其高度将以动画方式增加。您可以从下面的图片中看到动画的外观。我们将使用 'DoubleAnimation' 对象来执行此动画。

图示：矩形高度动画

因此，第一步是定义矩形对象。下面是定义 rectangle 对象的 XAML 代码片段，其 height 和 width 等于 100，背景为 chocolate。

<Grid x:Name="LayoutRoot" Background="White">
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">

</Rectangle>
</Grid>

作为第二步，我们需要定义何时触发动画。您可以从下面的代码片段中看到，我们已经定义了当 rectangle 对象加载时将调用 storyboard。

<Grid x:Name="LayoutRoot" Background="White"> 
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>

</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>

最后，我们放入了 'DoubleAnimation' 对象，它使用 'Height' 作为目标属性，将在 5 秒内从 '100' 的值动画到 '300' 的值。另请注意，目标名称是 rectangle 对象 'RectAnimated'。我们还将 'AutoReverse' 定义为 'true'，这意味着一旦达到 '300'，它将从 '100' 重新开始。

<Grid x:Name="LayoutRoot" Background="White"> 
<Rectangle x:Name="RectAnimated" Fill="Chocolate" Stroke="Black"
Width="100" Height="100">
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="RectAnimated"
Storyboard.TargetProperty="Height"
From="100" By="300" Duration="0:0:5" 
AutoReverse="True" 
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Grid>

Silverlight 进行转换有哪些不同的方式？

有时您会希望以各种方式转换您的对象。例如，您可能希望将对象倾斜 45 度；您可能希望使对象变形或旋转对象。以下是一些您可以使用 Silverlight 实现的重要转换示例。

下面是一个简单的示例，它使用 '`RotateTransform`' 将文本倾斜 45 度。
<TextBlock HorizontalAlignment="Center" Text="Text rotated by 45 degree"> <TextBlock.RenderTransform> <RotateTransform Angle="45" /> </TextBlock.RenderTransform> </TextBlock>	S
下面是一个简单的示例，它使用 '`ScaleTransform`' 将文本缩放到 '`2`'。
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Text scaled with 2"> <TextBlock.RenderTransform> <ScaleTransform ScaleX="2"/> </TextBlock.RenderTransform> </TextBlock>
下面是一个简单的示例，它使用 '`RenderTransform`' 将文本定位到特定的 X 和 Y 位置。
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Text with X/Y values"> <TextBlock.RenderTransform> <TranslateTransform X="-100" Y="-100"/> </TextBlock.RenderTransform> </TextBlock>
如果您想使对象变形，下面是一个简单的 XAML 代码片段，它将您的矩形对象变形 45 度。
<Rectangle Fill="Chocolate" Stroke="Black" Width="100" Height="100"> <Rectangle.RenderTransform> <SkewTransform AngleX="45"/> </Rectangle.RenderTransform> </Rectangle>
在某些情况下，您希望对一个对象应用两种或多种转换类型。在这种情况下，您可以使用 '`TransformGroup`' 来应用多种转换。下面的代码片段显示了 '`SkewTransform`' 和 '`RotateTransform`' 应用于矩形对象的组合。
<Rectangle Fill="Chocolate" Stroke="Black" Width="100" Height="100"> <Rectangle.RenderTransform> <TransformGroup> <SkewTransform AngleX="45"/> <RotateTransform Angle="45"/> </TransformGroup> </Rectangle.RenderTransform> </Rectangle>