[学习记号 - SL动画] 故事板与事件触发器

Silverlight的动画是基于Timeline（时间线）的动画，继承于Timeline类，通过对对象的个别属性进行控制，可以达到对对象进行动画的处理。

动画类位于System.Windows.Media.Animation命名空间

Timeline（时间线）: 可以声明动画在某段时间的开始和结束状态及动画的持续时间，并记录动画在此时间段内的顺序、状态以及行为。

Silverlight动画类型

1、关键帧动画：可以指定任意数量的目标值，并可以控制它们之间的内插方法。

2、From/To/By动画（线性插值动画）：用来反映某个对象在指定时间段内持续渐变的过程。

 

Storyboard（故事板）

Storyboard（故事板）是Silverlight动画的基本单元，它用来分配动画时间，可以使用同一个故事板对象产生一种或多种动画效果，并且允许控制动画的播放、暂停、停止以及在何时何地播放。

使用故事板时，必须指定TargetProperty（目标属性）和TargetName（目标名称）属性，这两个属性把故事板和所有产生的动画效果衔接起来，起到了桥梁的作用，下面是一个完整的Storyboard动画代码：

<Storyboard>
       <DoubleAnimation Storyboard.TargetName="ellipse1" Storyboard.TargetProperty="Width" From="150" To="300" Duration="0:0:3" />
</Storyboard>

 

EventTrigger（事件触发器）

当完成一个故事板定义并声明了动画类型之后，这个动画并不能在XAML页面加载后自动播放，因为并没有指定动画播放的开始事件，此时需要使用EventTrigger（事件触发器）对象，然后通过事件触发器播放BeginStoryboard故事板的动画效果，接下来将前面的示例加入到事件触发元素中，组成一个完整的播放动画。

XAML代码：
<UserControl
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="Anim.MainPage"
       Width="640" Height="480">

       <Canvas Background="AliceBlue">
              <Ellipse x:Name="ellipse1" Fill="GreenYellow"
                     Width="150" Height="200" />
              <Canvas.Triggers>

                     <!--创建触发器-->
                     <EventTrigger RoutedEvent="Canvas.Loaded">
                            <EventTrigger.Actions>
                                   <BeginStoryboard>
                                          <Storyboard>
                                                 <DoubleAnimation
                                                        Storyboard.TargetName="ellipse1"
                                                        Storyboard.TargetProperty="Width"
                                                        From="150" To="300" Duration="0:0:3" />
                                          </Storyboard>
                                   </BeginStoryboard>
                            </EventTrigger.Actions>
                     </EventTrigger>
              </Canvas.Triggers>
       </Canvas>
</UserControl>

在上面的代码声明了一个Canvas.Triggers（触发器），然后声明RoutedEvent（事件通道）为Canvas.Loaded（当Canvas加载完成后触发的事件）。EventTrigger.Actions（事件行为）包含了BeginStoryboard，用来开始播放故事板里的动画对象。简而言之，就是当这个XAML的画布加载完成就立刻播放故事板包含的动画效果。

 

除了在XAML代码中使用EventTrigger播放动画外，还可以将故事板包括在Resources（资源元素）内，在后台代码中引用故事板的x:Name，然后使用Begin方法来播放动画。

XAML代码：
<UserControl
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       x:Class="Anim.MainPage"
       Width="640" Height="480">

       <!--将Storyboard包含在Resources内-->
       <UserControl.Resources>
              <Storyboard x:Name="storyboard1">
                     <DoubleAnimation
                            Storyboard.TargetName="ellipse1"
                            Storyboard.TargetProperty="Width"
                            From="150" To="300" Duration="0:0:3" />
              </Storyboard>
       </UserControl.Resources>

       <Canvas Background="AliceBlue">
              <Ellipse x:Name="ellipse1" Fill="GreenYellow" Width="150" Height="200" />             
       </Canvas>
</UserControl>

C#代码：
namespace Anim
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            // 为初始化变量所必需
            InitializeComponent();
            
            // 使用Begin方法播放动画
            storyboard1.Begin();
        }
    }
}