一步一步学动画[1]：Silverlight中Animation的应用

1、Animation简介
动画是快速播放一系列图像（其中每个图像与下一个图像略微不同）给人造成的一种幻觉。大脑感觉这组图像是一个变化的场景。在电影中，摄像机每秒钟拍摄许多照片（帧），便可使人形成这种幻觉。用投影仪播放这些帧时，观众便可以看电影了。在 Silverlight 中，通过对对象的个别属性应用动画，可以对对象进行动画处理。例如，若要使 UIElement 增大，需对其 Width 和 Height 属性进行动画处理。若要使 UIElement 逐渐从视野中消失，可以对其 Opacity 属性进行动画处理。可以对 Silverlight 中许多对象的属性进行动画处理。

说明：在 Silverlight 中，您只能对值类型为 Double、Color或 Point 的属性执行简单的动画处理。此外，还可以使用 ObjectAnimationUsingKeyFrames 对其他类型的属性进行动画处理，但是这需要使用离散内插（从一个值跳到另一个值），而多数人认为这不是真正的动画。

---

2、Animation示例：页面内物件淡入淡出效果
本示例使用 DoubleAnimation（一种生成 Double 值的动画类型）对 Rectangle 的 Opacity 属性进行动画处理。因此，Rectangle 将逐渐进入视野并逐渐从视野中消失。
【1】创建一个 Rectangle 元素：

<StackPanel>
<Rectangle MouseLeftButtonDown="Mouse_Clicked"
x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />
</StackPanel>

【2】创建 DoubleAnimation：
由于 Opacity 属性的类型是 Double，因此需要一个生成 Double 值的动画。DoubleAnimation 就是这样一种动画；它可以创建两个 Double 值之间的过渡。若要指定 DoubleAnimation 的起始值，可设置其 From 属性。若要指定其终止值，可设置其 To 属性。

<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever"/>

其中，Duration是指从其起始值过渡为目标值所需的时间。AutoReverse说明动画会重复运行，而RepeatBehavior则指明了这个动画会无限期的重复下去。

【3】创建 Storyboard 对象：

<Storyboard>
<DoubleAnimation From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

上面的代码创建了一个Storyboard并把动画放置入内。而后要使用 TargetName 附加属性指定要进行动画处理的对象。在下面的代码中，为 DoubleAnimation 指定了一个目标名称 myAnimatedRectangle，这是要进行动画处理的对象的名称。

<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

最后使用 TargetProperty 附加属性指定要进行动画处理的属性。在下面的代码中，动画被配置为面向 Rectangle 的 Opacity 属性。

<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>

【4】将Storyboard与事件相关联
接下来您需要指定何时开始播放动画。可以使用事件执行此操作。
1.将演示图板作为一种资源。将 Storyboard 放入一个资源块内，以便您能够轻松地自代码引用该 Storyboard，以执行开始、停止、暂停和继续等操作。下面的标记显示 StackPanel 对象资源块中声明的 Storyboard。请注意，您可以在任意资源块中声明 Storyboard，只要该资源块与您希望进行动画处理的对象位于同一个作用域中。如下面的代码：

<StackPanel>
<StackPanel.Resources>
<!-- Animates the rectangle's opacity. -->
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</StackPanel.Resources>
<Rectangle
x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />
</StackPanel>

2.将事件附加到某一元素。您可以使用多种事件来启动动画，包括鼠标相关事件，如在用户单击某一对象时引发的 MouseLeftButtonDown，或是在首次加载对象时引发的 Loaded 事件。有关事件的更多信息，请参见 Silverlight 的事件概述。在本示例中，MouseLeftButtonDown 事件附加到 Rectangle，这样用户单击矩形时将引发该事件。

<Rectangle MouseLeftButtonDown="Mouse_Clicked"
x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />

3.从事件处理程序控制动画。 Storyboard 提供多种方法，这些方法允许您控制 Storyboard 动画的播放，包括 Begin、Stop、Pause 和 Resume。本示例使用 Begin 方法，该方法在用户单击矩形并引发 MouseLeftButtonDown 事件时启动动画。

// When the user clicks the Rectangle, the animation begins.
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
myStoryboard.Begin();
}

【5】最后是完整的运行代码：

  <UserControl x:Class="animation_ovw_intro.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<StackPanel>
<StackPanel.Resources>
<!-- Animates the rectangle's opacity. -->
<Storyboard x:Name="myStoryboard">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:1"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</StackPanel.Resources>
<TextBlock Margin="10">Click on the rectangle to start the animation.</TextBlock>
<Rectangle MouseLeftButtonDown="Mouse_Clicked"
x:Name="MyAnimatedRectangle"
Width="100" Height="100" Fill="Blue" />
</StackPanel>
</UserControl>
//后台代码
private void Mouse_Clicked(object sender, MouseEventArgs e)
{
myStoryboard.Begin();
}

参考资料：MSDN