在Silverlight中制作路径动画.doc

在Silverlight中制作路径动画
Silverlight不像WPF一样能够支持基于路径的动画，想要在Silverlight中制作路径动画，必须基于关键帧，Silverlight提供了DoubleAnimation、PointAnimation、ColorAnimation来实现内插关键帧动画，相应地，Silverlight还提供了DoubleAnimationUsingKeyFrames、PointAnimationUsingKeyFrames、ColorAnimationUsingKeyFrames来进行多个值之间的内插动画处理。
1、简单介绍：
DoubleAnimation：在两个Double值（元素的一维属性，如X、Y、Angle、Width、Length等）之间做线性内插动画处理；
PointAnimation：在两个Point值（元素的二维属性，如几何图形的Center等）之间做线性内插动画处理；
ColorAnimation：在两个Color（元素的颜色）值之间做线性内插动画处理。
DoubleAnimationUsingKeyFrames：在一组KeyFrame中所设置的多个Double值之间做动画处理；
PointAnimationUsingKeyFrames：在一组KeyFrame中所设置的多个Point值之间做动画处理；
ColorAnimationUsingKeyFrames：在一组KeyFrame中所设置的多个Color值之间做动画处理。
2、通用属性：
TargetName：目标名称
TargetProperty：目标属性
From：开始值
To：结束值
Duration：间隔时间
3、基本方法：
Linear：线性内插
Discrete：离散内插
Spline：样条内插

这里我们利用DoubleAnimation来实现路径动画，其基本思路是将DoubleAnimation中的TargetProperty指向运动目标的X和Y坐标，通过线性地改变坐标值来使之按路径运动。首先确定一条闭合的路线，一个小的矩形将以在这条路线上运动。
第一步，在Silverlight用户页面中构建路径。通过PathSegment类下派生的ArcSegment，BezierSegment，LineSegment，PolyBezierSegment，PolyLineSegment，PolyQuadraticBezierSegment，QuadraticBezierSegment等对象元素可以构建任意形状大小的路径。本例中，我们构建了由7段直线组成的简单路径。路径如图 1红线所示：

图 1
Xmal代码如下所示：
<Path Stroke="Red" StrokeThickness="2" Canvas.Left="55" Canvas.Top="55">
<Path.Data>
<PathGeometry>
<PathFigure>
<LineSegment Point="300,0"/>
<LineSegment Point="300,300"/>
<LineSegment Point="500,300"/>
<LineSegment Point="500,0"/>
<LineSegment Point="800,500"/>
<LineSegment Point="0,500"/>
<LineSegment Point="0,0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>

第二步，创建动画的故事板。采用DoubleAnimationUsingKeyFrames来实现多个坐标值之间的内插处理，内插方法采用线性内插LinearDoubleKeyFrame。
Xmal代码如下：
<Canvas.Resources>
<Storyboard x:Name="storyboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PointAnimation1" Storyboard.TargetProperty="X"
Duration="0:0:21"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:6"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:12"/>
<LinearDoubleKeyFrame Value="800" KeyTime="0:0:15"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:18"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:21"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PointAnimation1" Storyboard.TargetProperty="Y"
Duration="0:0:21"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:3"/>
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:6"/>
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:9"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:12"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:15"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:18"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:21"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>

第三步，设置与动画相关联的图形元素。本例中我们使用一个长宽均为50的矩形。
Xmal代码如下：
<Rectangle Name="canvas1" Fill="#FF00B400" Width="10" Height="10" Canvas.Left="50" Canvas.Top="50">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="PointAnimation1"/>
</Rectangle.RenderTransform>
</Rectangle>
最后，编辑“开始”、“暂停”、“继续”、“停止”动画的事件，整个示例就完成了。

示例整体Xmal代码：
<UserControl x:Class="GuanjianzhenDonhua.MainPage"
xmlns="
xmlns:x="
xmlns:d="
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="1000">
<Canvas>
<Canvas.Resources>
<Storyboard x:Name="storyboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PointAnimation1"
Storyboard.TargetProperty="X"
Duration="0:0:21"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:3"/>
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:6"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:12"/>
<LinearDoubleKeyFrame Value="800" KeyTime="0:0:15"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:18"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:21"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="PointAnimation1"
Storyboard.TargetProperty="Y"
Duration="0:0:21"
RepeatBehavior="Forever">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:3"/>
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:6"/>
<LinearDoubleKeyFrame Value="300" KeyTime="0:0:9"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:12"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:15"/>
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:18"/>
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:21"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Path Stroke="Red" StrokeThickness="2" Canvas.Left="55" Canvas.Top="55">
<Path.Data>
<PathGeometry>
<PathFigure>
<LineSegment Point="300,0"/>
<LineSegment Point="300,300"/>
<LineSegment Point="500,300"/>
<LineSegment Point="500,0"/>
<LineSegment Point="800,500"/>
<LineSegment Point="0,500"/>
<LineSegment Point="0,0"/>
</PathFigure>
</PathGeometry>
</Path.Data>
</Path>
<Rectangle Name="canvas1" Fill="#FF00B400" Width="10" Height="10" Canvas.Left="50" Canvas.Top="50">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="PointAnimation1"/>
</Rectangle.RenderTransform>
</Rectangle>
<Button Canvas.Left="192" Canvas.Top="702" Content="开始" Height="40" Name="button1" Width="80" Click="button1_Click" />
<Button Canvas.Left="560" Canvas.Top="702" Content="继续" Height="40" Name="button2" Width="80" Click="button2_Click" />
<Button Canvas.Left="737" Canvas.Top="702" Content="结束" Height="40" Name="button3" Width="80" Click="button3_Click" />
<Button Canvas.Left="372" Canvas.Top="702" Content="暂停" Height="40" Name="button4" Width="80" Click="button4_Click" />
</Canvas>
</UserControl>

示例整体CS代码：
public MainPage()
{
InitializeComponent();
}

private void button1_Click(object sender, RoutedEventArgs e)
{
storyboard.Begin();
}

private void button2_Click(object sender, RoutedEventArgs e)
{
storyboard.Resume();
}

private void button3_Click(object sender, RoutedEventArgs e)
{
storyboard.Stop();
}

private void button4_Click(object sender, RoutedEventArgs e)
{
storyboard.Pause();
}

示例整体界面：

按下“开始”按钮之后，绿色的矩形按照红色的路径进行运动了。