WPF快速指导15：动画

WPF快速指导15：动画

在WPF或者SilverLight中，所谓动画，就是让一个对象的属性，随着时间而发生变化。动画由时间线（timeline）控制。时间线在C#中的原型为：

    public abstract class Timeline : Animatable
    {
         //省略
    }

它是一个抽象类。在WPF中，定义了各类时间线，最常用的有DoubleAnimation，它便继承自Timeline。

1：Storyboard及一个简单示例

容纳时间线的是故事板（Storyboard）。下面是一个最简单的例子：

前台：

    <Canvas x:Name="Carrier" Width="800" Height="600" Background="Silver" MouseLeftButtonDown="Carrier_MouseLeftButtonDown" >
        <Image x:Name="image1" Source="/WpfApplication1;component/run.jpg">
        </Image>
        <Button x:Name="buttonTest"  Click="buttonTest_Click" Canvas.Top="250" Content="测试">
        </Button>
    </Canvas>

后台：

        private void buttonTest_Click(object sender, RoutedEventArgs e)
        {
            TranslateTransform animatedTranslateTransform = new TranslateTransform();
            image1.RenderTransform = animatedTranslateTransform;
            DoubleAnimation doubleAnimation = new DoubleAnimation(0, 360, new Duration(TimeSpan.FromMilliseconds(1000)));
            this.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform);
            Storyboard.SetTargetName(doubleAnimation, "AnimatedTranslateTransform");
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(TranslateTransform.XProperty));
            Storyboard translationStoryboard = new Storyboard();
            translationStoryboard.Children.Add(doubleAnimation);
            translationStoryboard.Begin(this);
        }

在这个示例中，Storyboard中，我们使用了DoubleAnimation对象，它表示：随着时间改变一个数值。Storyboard通过SetTargetName方法将DoubleAnimation对象和animatedTranslateTransform联系起来。而animatedTranslateTransform又被指向image1.RenderTransform（关于RenderTransform属性，不明白的可以查看上篇《WPF快速指导14：变换》）。这就相当于说，动画被关联到了image1对象上。

这里面要重点讲一下SetTargetProperty方法。该方法第一个参数指定动画对象，第二个方法指的是，在SetTarget方法中被关联的那个的对象的一个属性。在本文的实例中，这个属性是TranslateTransform.XProperty。串联起来，本示例的需求就是：“在1000毫秒的时间里，让image1的TranslateTransform.XProperty属性由0变为360”。如果我们换一个属性，如TranslateTransform.XProperty，则表达的意思是：“在1000毫秒的时间里，让image1离最高处由0变为360”。

本示例运行效果：

2：关键帧

在上面的这个例子中，我们使用的线性插值。为了调整这个行为，可以用一组关键帧（key frame）来过渡。这也就是说，为了更改动画从起始属性到结束属性的线性行为，可插入一个或者多个关键帧。查看下面的示例：

            TranslateTransform animatedTranslateTransform = new TranslateTransform();
            image1.RenderTransform = animatedTranslateTransform;
            this.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform);
            DoubleAnimationUsingKeyFrames translationAnimation = new DoubleAnimationUsingKeyFrames();
            translationAnimation.Duration = TimeSpan.FromSeconds(6);
            translationAnimation.KeyFrames.Add(new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));
            translationAnimation.KeyFrames.Add(new DiscreteDoubleKeyFrame(400, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));
            translationAnimation.KeyFrames.Add(new SplineDoubleKeyFrame(0, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(6)), new KeySpline(0.6, 0.0, 0.9, 

0.0)));
            translationAnimation.RepeatBehavior = RepeatBehavior.Forever;
            Storyboard.SetTargetName(translationAnimation, "AnimatedTranslateTransform");
            Storyboard.SetTargetProperty(translationAnimation, new PropertyPath(TranslateTransform.XProperty));
            Storyboard translationStoryboard = new Storyboard();
            translationStoryboard.Children.Add(translationAnimation);
            translationStoryboard.Begin(this);

在这个示例中，一个共有3个关键帧：LinearDoubleKeyFrame，DiscreteDoubleKeyFrame，SplineDoubleKeyFrame。

LinearDoubleKeyFrame指的是：这是一个线性关键帧。

DiscreteDoubleKeyFrame指的是：这是一个离散关键帧。

SplineDoubleKeyFrame指的是：这是一个加速和减速关键帧。

要体会它们之间的差异，可以运行代码，任何语言描述不抵一次视觉感受。

3：动画缓动

缓动（Easing）允许我们创建各类动画效果，类似反弹或者弹簧效果。如BounceEase，模拟的就是一种弹跳效果。在第一个示例中，我们加入如下语句：           

 doubleAnimation.EasingFunction = new BounceEase() { Bounces=2, EasingMode = EasingMode.EaseOut, Bounciness = 2 };

就会发现图片在到达终点会弹跳，然后结束。所有内建的缓动类，都在System.Windows.Media.Animation命名空间中，它们都以Ease结尾。

本代码的源码下载：WpfApplication1.rar