Silverlight动画制作之From/To/By基本动画

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 ，表示动画播放完毕后会自动从后向前反向播放，并且是无限制的播放。