使用silverlight中的Storyboard实现动画效果

在正文开始之后，先介绍一下Storyboard, 其定义如下:
Controls animations with a timeline, and provides object and property targeting
information for its child animations.

因为它用时间线（timeline）来控制，并提供了要绑定的对象和目标属性信息。其在XAML中的
格式如下：

<Storyboard

>
oneOrMoreChildTimelines
</Storyboard>

其中的oneOrMoreChildTimelines可以是如下任一或多个对象元素：

Storyboard, ColorAnimation, ColorAnimationUsingKeyFrames, DoubleAnimation,
DoubleAnimationUsingKeyFrames, PointAnimation, PointAnimationUsingKeyFrames

下面就其中几个主要的元素作如下演示说明，首先请看“DoubleAnimation”：

DoubleAnimation：当动画值的变化（FROM ...TO...）类型是 Double型时使用。

下面演示的就是矩形（MyAnimatedRectangle）的“Opacity”（透明度）属性在一秒内从1到0
的动画（参数说明见注释）。

<StackPanel>
<StackPanel.Resources>
<!--将Storyboard 放入Resources中是为了更方便的在代码中引用 Storyboard 以及进行互操作，如
start, stop, pause,和恢复Storyboard. -->
<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>
<!--参数说明：
Storyboard.TargetName:附加属性操作到指定的对象上;
Storyboard.TargetProperty:要操作指定对象的属性;
From..To :上述属性值的起始范围;
Duration: 在多少时间内完成上述属性值的变化;
AutoReverse:是否在vanishes 之后 fade back 到初始状态;
RepeatBehavior:指示当前animation 不断反复
-->

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

ColorAnimation：当动画值的变化（FROM ...TO...）类型是 Color型时使用。

下面演示的是myStackPanel背景色在4秒内从红到绿的动画。

<StackPanel x:Name="myStackPanel" Background="Red" Grid.Row="0"
Loaded="Start_Animation">
<TextBlock Foreground="White">使用层级方式绑定TargetProperty：</TextBlock>
<StackPanel.Resources>
<Storyboard x:Name="colorStoryboard">
<ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="myStackPanel"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
From="Red" To="Green" Duration="0:0:4" />
</Storyboard>
</StackPanel.Resources>
</StackPanel>

下面XAML代码与上面所示的实现效果相同：

<StackPanel Loaded="Start_Animation">
<TextBlock Foreground="White">普通方式绑定TargetProperty：</TextBlock>
<StackPanel.Resources>
<Storyboard x:Name="colorStoryboard2">
<ColorAnimation BeginTime="00:00:00" Storyboard.TargetName="mySolidColorBrush"
Storyboard.TargetProperty="Color" From="AliceBlue" To="Green" Duration="0:0:4" FillBehavior="Stop"/>
</Storyboard>
</StackPanel.Resources>
<StackPanel.Background>
<SolidColorBrush x:Name="mySolidColorBrush" Color="AliceBlue" />
</StackPanel.Background>
</StackPanel>

接下来是PointAnimation: 当动画值的变化（FROM ...TO...）类型是 Point型时使用。

下面的XAML演示的是EllipseGeometry对象从point(20,200)移动到point(400,100)的动画。

<PointAnimation Storyboard.TargetProperty="Center"
Storyboard.TargetName="MyAnimatedEllipseGeometry"
Duration="0:0:5"
From="20,200"
To="400,100"
RepeatBehavior="Forever" />

</Storyboard>
</Canvas.Resources>
<Path Fill="Blue">
<Path.Data>
<!-- Describes an ellipse. -->
<EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
Center="20,20" RadiusX="15" RadiusY="15" />
</Path.Data>
</Path>