Silverlight动画制作之From/To/By基本动画
From/To/By
基本动画其中包含了三个最重要的属性：
From
；
To
；
By
。
From
指的是对象目标属性的起始值，
To
指的是对象目标属性的结束值，
By
指的是结束状态相对于起始状态的偏移量。这里我们需要注意的是动画对象不能同时包括
To
和
By
两个属性，否则编译器会忽略掉
By
属性的作用。
Silverlight
为
From/To/By
基本动画提供了
3
个
Timeline
的派生类：
1
）
DoubleAnimation
：指定时间内，使用线性内插属性处理属性值为
Double
的动画。
2
）
ColorAnimation
：指定时间内，使用线性内插属性处理属性值为
Color
的动画。
3
）
PointAnimation
：指定时间内，使用线性内插属性处理属性值为
Point
的动画。
在使用方法上这
3
中动画没有太大的区别，唯一的不同点就是我们怎么样给
From
，
To
，
By
属性进行赋值。
下面我们通过一个小的
Demo
演示一下
From/To/By
基本动画。
演示效果如图：
刚开始时的动画：
结束时的动画：
我们可以从两张图很明显看到这个圆形从半径，颜色，位置上都发生了变化。下面我们通过代码看一下这样的效果是如何实现的。
<Canvas x:Name="LayoutRoot" Background="White">
<Path x:Name="PathAnimate">
<Path.Fill>
<RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5"
RadiusX="0.5" RadiusY="0.5">
<GradientStop Color="Black" Offset="0"/>
<GradientStop x:Name="BrushAnimate" Offset="0.5"/>
<GradientStop Color="Chocolate" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
<Path.Data>
<EllipseGeometry x:Name="EllipseGeometryAnimate"/>
</Path.Data>
<Path.Triggers>
<EventTrigger RoutedEvent="Path.Loaded">
<BeginStoryboard>
<Storyboard>
<!--
控制圆形的水平半径
-->
<DoubleAnimation
Storyboard.TargetName="EllipseGeometryAnimate"
Storyboard.TargetProperty="RadiusX"
From="25" To="80" Duration="0:0:4"
RepeatBehavior="Forever" AutoReverse="True"/>
<!--
控制圆形的垂直半径
-->
<DoubleAnimation
Storyboard.TargetName="EllipseGeometryAnimate"
Storyboard.TargetProperty="RadiusY"
From="25" To="80" Duration="0:0:4"
RepeatBehavior="Forever" AutoReverse="True"/>
<!--
控制圆形的填充颜色
-->
<ColorAnimation
Storyboard.TargetName="BrushAnimate"
Storyboard.TargetProperty="Color"
From="Black" To="Chocolate" Duration="0:0:4"
RepeatBehavior="Forever" AutoReverse="True"
SpeedRatio="2"/>
<!--
控制圆形的中心点
-->
<PointAnimation
Storyboard.TargetName="EllipseGeometryAnimate"
Storyboard.TargetProperty="Center"
From="25,25" To="150,150" Duration="0:0:4"
RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Path.Triggers>
</Path>
</Canvas>
下面我们来说一下这段代码的基本意思：
1
）首先我们声明了
3
个对象，分别是路径图形，放射渐变画刷和椭圆几何图形。这些对象我们只进行了命名，相关属性的设置需要我们在接下来的代码中去实现。
2
）接下来我们声明动画播放的触发器事件：
Path.Loaded
；
3
）然后我们向情节串联图版
Storyboard
中添加动画元素。在我们这个
Demo
中首先添加了两个
DoubleAnimation
对象，目的是为了改变椭圆几何图形的水平半径和垂直半径，所以我们设置的目标属性分别是
RadiusX
和
RadiusY
。我们还声明了
ColorAnimation
对象用来改变放射渐变画刷停止点的颜色，除了我们声明
From
和
To
之外，还设定了
SpeedRatio
的值为
2
，说明其他动画运行一次，颜色却已经变换了
2
次。最后声明了
PointAnimation
对象，用于控制椭圆几何图形的中心
Center
属性。
Center
属性值类型为
Point
类型，所以我们声明
From
和
To
的时候需要按照坐标形式。
4
）最后需要注意的是我们还声明了
RepeatBehavior
和
AutoReverse
两个属性，
RepeatBehavior
属性值为
Forever
，
AutoReverse
属性值为
True
，表示动画播放完毕后会自动从后向前反向播放，并且是无限制的播放。
本文转自 王祖康 51CTO博客，原文链接：
http://blog.51cto.com/wzk89/441585
，如需转载请自行联系原作者
