Silverlight动画制作之From/To/By基本动画
From/To/By基本动画其中包含了三个最重要的属性:FromToByFrom指的是对象目标属性的起始值,To指的是对象目标属性的结束值,By指的是结束状态相对于起始状态的偏移量。这里我们需要注意的是动画对象不能同时包括ToBy两个属性,否则编译器会忽略掉By属性的作用。
SilverlightFrom/To/By基本动画提供了3Timeline的派生类:
1DoubleAnimation:指定时间内,使用线性内插属性处理属性值为Double的动画。
2ColorAnimation:指定时间内,使用线性内插属性处理属性值为Color的动画。
3PointAnimation:指定时间内,使用线性内插属性处理属性值为Point的动画。
在使用方法上这3中动画没有太大的区别,唯一的不同点就是我们怎么样给FromToBy属性进行赋值。
下面我们通过一个小的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对象,目的是为了改变椭圆几何图形的水平半径和垂直半径,所以我们设置的目标属性分别是RadiusXRadiusY。我们还声明了ColorAnimation对象用来改变放射渐变画刷停止点的颜色,除了我们声明FromTo之外,还设定了SpeedRatio的值为2,说明其他动画运行一次,颜色却已经变换了2次。最后声明了PointAnimation对象,用于控制椭圆几何图形的中心Center属性。Center属性值类型为Point类型,所以我们声明FromTo的时候需要按照坐标形式。
4)最后需要注意的是我们还声明了RepeatBehaviorAutoReverse两个属性,RepeatBehavior属性值为ForeverAutoReverse属性值为True,表示动画播放完毕后会自动从后向前反向播放,并且是无限制的播放。