在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代码如下所示：
Left="55" Canvas.Top="55">

th>

第二步，创建动画的故事板。采用DoubleAnimationUsingKeyFrames来实现多个坐标值之间的内插处理，内插方法采用线性内插LinearDoubleKeyFrame。
Xmal代码如下：

tion="0:0:21"
RepeatBehavior="Forever">

ame Value="500" KeyTime="0:0:12"/>

s>

me="0:0:6"/>

第三步，设置与动画相关联的图形元素。本例中我们使用一个长宽均为50的矩形。
Xmal代码如下：
ft="50" Canvas.Top="50">

最后，编辑“开始”、“暂停”、“继续”、“停止”动画的事件，整个示例就完成了。

示例整体Xmal代码：
mlns="
xmlns:x="
xmlns:d="
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="800" d:DesignWidth="1000">

tionUsingKeyFrames Storyboard.TargetName="PointAnimation1"
Storyboard.TargetProperty="X"
Duration="0:0:21"
RepeatBehavior="Forever">

DoubleKeyFrame Value="500" KeyTime="0:0:15"/>

le.RenderTransform>

24、

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

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

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

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

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

示例整体界面：

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

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();
}

示例整体界面：

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