Silverlight动画效果之渐变风格方式动画

按照动画的形成方式，Silverlight 动画可以分为两种：

    * 渐变风格方式（确定开始和结束，然后按照一个固定的频率完成渐变） ；
    * 关键帧生成方式 （设定若干中间帧，可以按照指定的节奏来变化，节奏可以忽快忽慢）；

本文重点演示渐变风格方式。关键帧生成方式下篇再涉及。

要实现一个渐变风格动画，一般需要下面4步，我们下面的演示是实现一个小球从左到右来回移动的动画效果：

建立动画的4个步骤：

    * 创建一个对象并找到它。
      为了找到他，我们可以使用 x:Name 来给这个对象命名。为何是 x:Name  ， 请参看我之前的博客： WPF，Silverlight 中的 xmlns，xmlns:x
      本文我们是一个红色的园球：

1.     <Ellipse x:Name="ellipse" Height="20" Width="20"
   
2.       Canvas.Left="31" Canvas.Top="31" Fill="#FFBE4343" >
   
3.     </Ellipse>
   

复制代码

* 创建一个EventTrigger.
      EventTrigger 响应事件的一组触发器。 EventTrigger 对象将在发生指定的路由事件时启动一组 Actions。例如，当Silverlight加载成功后启动一组动画。
      EventTrigger 最重要的属性就是 RoutedEvent， 用于获取或设置将激活此触发器的 RoutedEvent。
      如果包含此 EventTrigger 的模板或样式没有指定 TargetType 属性，则需要使用 ClassName.EventName 语法通过类名限定事件名称。

    目前Silverlight只支持一个事件：Element.Loaded，Element是包含trigger的对象的名称(这里是 Canvas)。

1.     <Canvas>
   
2.         <Canvas.Triggers>
   
3.             <EventTrigger RoutedEvent="Canvas.Loaded">
   
4.             </EventTrigger>
   
5.         </Canvas.Triggers>
   
6.         <Ellipse x:Name="ellipse" Height="20" Width="20"
   
7.               Canvas.Left="31" Canvas.Top="31" Fill="#FFBE4343" >
   
8.         </Ellipse>
   
9.     </Canvas>
   

复制代码

* 使用 BeginStoryboard 和 Storyboard
      BeginStoryboard 是一个包含 Storyboard 对象的触发器操作，该操作可启动 Storyboard 并将其动画分发给动画的目标对象和属性。
      Storyboard 对象包含动画定义。 当定义动画时，您只需在 EventTrigger 定义内嵌入这些对象。

1.     <Canvas>
   
2.         <Canvas.Triggers>
   
3.                   <EventTrigger RoutedEvent="Canvas.Loaded">
   
4.                     <BeginStoryboard>
   
5.                     <Storyboard AutoReverse="True" RepeatBehavior="Forever">
   
6.                     </Storyboard>
   
7.                 </BeginStoryboard>
   
8.             </EventTrigger>
   
9.         </Canvas.Triggers>
   
10.         <Ellipse x:Name="ellipse" Height="20" Width="20"
    
11.               Canvas.Left="31" Canvas.Top="31" Fill="#FFBE4343" >
    
12.         </Ellipse>
    
13.     </Canvas>
    

复制代码

上面例子中的两个参数的意思分别如下：

    AutoReverse： 获取或设置一个值，该值指示时间线在完成向前迭代后是否按相反的顺序播放。

    RepeatBehavior ： 获取或设置此时间线的重复行为。默认情况下，时间线的重复次数为 1.0，即播放一次时间线，不进行重复。但是，如果将 Timeline 的 RepeatBehavior 属性设置为 Forever，则时间线将会无限重复。

    如果 AutoReverse 属性设置为 true 且 RepeatBehavior 值为 2x 的时间线将向前播放，然后向后播放，再向前播放，然后再向后播放，这样才算完。

    除了指定时间线播放的次数，还可以指定希望时间线播放的总时间长度。如果 RepeatBehavior  的值为： 0:0:4 则表示要播放4秒钟。