WPF中的动画

WPF中的动画
                                                                                  周银辉

动画无疑是WPF中最吸引人的特色之一，其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互。这里我们讨论一下故事板。

在WPF中我们采用Storyboard（故事板）的方式来编写动画，为了对Storyboard有个大概的印象，你可以粘贴以下代码到XamlPad来查看效果：

<!-- This example shows how to animate with a storyboard.-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 
  WindowTitle="Storyboards Example">
  <StackPanel Margin="20">
    
    <Rectangle Name="MyRectangle"
      Width="100"
      Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
          <BeginStoryboard>
            <Storyboard RepeatBehavior="Forever" AutoReverse="True">
              <DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />              
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle> 
  </StackPanel>
</Page>

在介绍Storyboard之前应该先了解Animation
Animation提供一种简单的“渐变”动画，我们为一个Animation指定开始值和一个结束值，并指定由开始值到达结束值所需的时间，便可形成一个简单的动画。比如我们指定长方形的宽度由100变化到200，所需时间为1秒，很容易想像这样的动画是什么样的，而它对应的Xaml代码如下：

<DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />       

将它翻译成C#代码则如下:

 DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));

代码里我们定义了一个DoubleAnimation，并指定了它的开始值和结束值以及它由开始值到达结束值所需的时间。至于后面两句，它们是用来将Aniamtion与指定的对象和指定的属性相关联，等会我们将介绍。
注意到，这里我们使用的是DoubleAnimation，因为我们所要变化的是数值。那么如果我们要变化颜色是不是就用ColorAnimation了呢，对，其实出了这些之外还有PointAnimation等等，并且你可以实现IAnimatable接口来实现自定义版本的Animation。关于这些你可以参见System.Windows.MediaAniamtion名字空间.

但值得注意的是并非每个属性都能够使用Animation，它必须满足以下条件：
1,它必须是Dependency Property
2,它所在类必须继承于DependencyObject,必须实现了IAnimatable接口.
3,必须有类型一致的Animation Type（即Color类型使用ColorAniamtion，Point类型使用PointAnimation等）

一个简单的Animation定义了一个简单的动画，很容易想到的是，如果若干个Animation同时作用于一个对象，那么这个对象不就可以表现复杂的动画了吗，对，这就是Storyboard

Storyboard可以看做是Animation的容器，它包含了若干的简单动画来完成一个复杂动画。
参考以下代码：

<!-- This example shows how to animate with a storyboard.-->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 
  WindowTitle="Storyboards Example">
  <StackPanel Margin="20">
    
    <Rectangle Name="MyRectangle"
      Width="100"
      Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MySolidColorBrush" Color="Blue" />
      </Rectangle.Fill>
      <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
          <BeginStoryboard>
            <Storyboard RepeatBehavior="Forever" AutoReverse="True">
              <DoubleAnimation 
                Storyboard.TargetName="MyRectangle"
                Storyboard.TargetProperty="Width"
                From="100" To="200" Duration="0:0:1" />    
              <ColorAnimation 
                Storyboard.TargetName="MySolidColorBrush"
                Storyboard.TargetProperty="Color"
                From="Blue" To="Red" Duration="0:0:1" />            
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle> 
  </StackPanel>
</Page>

这里我们的Storyboard定义了DoubleAnimation来变化矩形的宽度，并定义了ColorAnimation来变化矩形的颜色。

至此,你已经可以编写绚丽的WPF动画了,并推荐你下载Expression Blend来制作WPF动画.

但你会发现使用XAML标记的方式来编写动画虽然很简单,但缺乏了C#等程序设计语言的灵活性,比如我们的矩形动画中矩形的宽度是由后台逻辑计算出来的变量值,我们的动画将如何编写呢,这时我更喜欢使用C#的方式来编写动画,虽然这所需的代码量更大.
以下重点介绍如何用C#编写动画，并且这更助于你理解Storyboard是如何工作的。

参考以下代码：

            this.Name = "PageMain";
            myRectangle.Name = "MyRectangle";  
            
            NameScope.SetNameScope(this, new NameScope());                      
            this.RegisterName(myRectangle.Name, myRectangle);

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));
            
            
            Storyboard myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);

            this.Loaded += delegate(object sender, MouseEventArgs e)
            {
                myStoryboard.Begin(this);
            };

其中:

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 100;
            myDoubleAnimation.To = 200;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
定义了一个DoubleAniamtion,并指定了它的开始值和结束值以及所需的时间.
Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);设置myDoubleAniamtion的作用对象是"myRectangle",注意到传入的第二个参数是一个字符串myRectangle.Name,那么我们的程序怎么知道"myRectangle"这个字符串就是指我们的矩形对象myRectangle呢,这里存在一个名称与对象的映射,即我们的"myRectangle"映射到矩形对象myRectangle,为了构造这个映射我们涉及到了NameScope(名字域)这个概念.
            NameScope.SetNameScope(this, new NameScope());                      
            this.RegisterName(myRectangle.Name, myRectangle);
上面的代码中,this设置了一个名字域,myRectagle向这个名字域注册了自己的名字,这样我们的程序就可以通过this的名字域来查找到myRectangle与"myRectangle"之间的映射关系了,关于NameScope可以参见MSDN WPF Namescopes主题.
为了让myDoubleAnimation知道它所作用的属性是谁,我们使用Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.WidthProperty));语句来将Aniamtion与属性关联起来,其中PropertyPath中指定要作用的对象所对应的DependencyProperty.
然后我们将定义好的myDoubleAniamtion添加到myStoryboard的Children中去.最后就可以通过调用Storyboard的Begin(FrameworkElement)方法来开始我们的动画.

Begin方法的另一个重载形式是public Begin (containingObject,isControllable),第二个参数表明我们的storyboard是否是可控的,如果可控的话,我们可以像控制播放器一样控制来控制storyboard,关于控制Storyboard请参考Storyboard类中的Pause,Seek等方法.

至此也许我们会认为这些知识足以应付简单的动画了,现在让我们一起设计一个简单的动画,也许会发现些问题.

假设我们的界面中存在一个Button对象button1,我们设计一个简单的动画让它在窗口中的x坐标从0连续变化到100,然后在从100变化到0,如此重复.也许我们会编写如下的代码:

            this.button1.Name = "button1";
            this.Name = "window1";
            NameScope.SetNameScope(this, new NameScope());
            this.RegisterName(this.button1.Name, this.button1);

            DoubleAnimation xAnimation = new DoubleAnimation();
            xAnimation.From = 0;
            xAnimation.To = 100;
            xAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));

            Storyboard story = new Storyboard();
            story.AutoReverse = true;
            story.RepeatBehavior = RepeatBehavior.Forever;
            story.Children.Add(xAnimation);

            Storyboard.SetTargetName(xAnimation, this.button1.Name);
            Storyboard.SetTargetProperty(xAnimation, ???);

但当我们编写到Storyboard.SetTargetProperty(xAnimation, ???);时发现似乎不知道将我们的xAniamtion关联到哪个属性.似乎Button中没有用来控制X坐标的DependencyProperty.但通过研究后发现(你可以通过ExpressionBlend自动生成的XAML代码来发现这些信息),如果我们将button1的RenderTransform设置为TranslateTransform,然后可以通过TranslateTransform的XProperty属性来更改button1的X坐标.注意到,我们并不是像以前一样直接关联到Button的某个属性(比如先前的WidthProperty),而是通过其RenderTransformProperty属性的XProperty来间接关联的,这中方式叫做"属性链"(PropertyChain).
参考下面的代码:

            DependencyProperty[] propertyChain = new DependencyProperty[]
            {
                Button.RenderTransformProperty,
                TranslateTransform.XProperty
            };

            Storyboard.SetTargetProperty(xAnimation, new PropertyPath("(0).(1)", propertyChain));

为了构造PropertyChain,我们先定义一个DependencyProperty的数组,注意数组的元素是怎么来的,它按照属性链的"链条"关系依次书写,直到到达我们最终要修改的属性,(由于我们是通过将RenderTransformProperty设置为TranslateTransform类型,所以第二个元素是TranslateTransform.XProperty),简单地说就是(类型1.属性1,类型2.属性2,....类型n.属性n),其中类型i是属性i-1的类型或可以与之转换的类型.
这样我们的代码就演化如下:

            this.button1.RenderTransform = new TranslateTransform();

            this.button1.Name = "button1";
            this.Name = "window1";
            NameScope.SetNameScope(this, new NameScope());
            this.RegisterName(this.button1.Name, this.button1);

            DoubleAnimation xAnimation = new DoubleAnimation();
            xAnimation.From = 0;
            xAnimation.To = 100;
            xAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));

            DependencyProperty[] propertyChain = new DependencyProperty[]
            {
                Button.RenderTransformProperty,
                TranslateTransform.XProperty
            };

            Storyboard story = new Storyboard();
            story.AutoReverse = true;
            story.RepeatBehavior = RepeatBehavior.Forever;
            story.Children.Add(xAnimation);

            Storyboard.SetTargetName(xAnimation, this.button1.Name);
            Storyboard.SetTargetProperty(xAnimation, new PropertyPath("(0).(1)", propertyChain));

            story.Begin(this);

注意:如果你收到关于PropertyChain的运行时错误或动画没有效果,那么你应该初始化button的RenderTransform属性,所以我们添加了this.button1.RenderTransform = new TranslateTransform();语句.

更多的,请参见Windows SDK "Storyboard Overview"
示例程序下载