WPF编程，通过KeyFrame 类型制作控件线性动画的一种方法。

原文:WPF编程，通过KeyFrame 类型制作控件线性动画的一种方法。

From/To/By类型的动画仅支持从一个值到另一个值的线性内插，

或者有限形式的非线性内插（AccelerationRatio和DecelerationRatio）。

如果要描述一个更复杂的动画，如希望一个动画的属性从A值到B值再到C值，则用Key frame动画。

它在指定的时间提供指定的值。

这里以一个球动态移动为例

1、前台

   <Canvas Background="AntiqueWhite">

            <Ellipse Name="elips"

                     Width="48"

                     Height="48"

                     Fill="Red"

                     Canvas.Left="480"

                     Canvas.Top="96" />

            <Canvas.Triggers>

                <EventTrigger RoutedEvent="Canvas.Loaded">

                    <BeginStoryboard>

                        <Storyboard TargetName="elips"

                                    TargetProperty="(Canvas.Left)">

                            <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"

                                                           AutoReverse="True"

                                                           Duration="0:0:10">

                                <LinearDoubleKeyFrame KeyTime="0:0:5"

                                                      Value="0" />

                                <LinearDoubleKeyFrame KeyTime="0:0:5.5"

                                                      Value="48" />

                                <DiscreteDoubleKeyFrame KeyTime="0:0:8"

                                                        Value="244" />

                                <DiscreteDoubleKeyFrame KeyTime="0:0:9"

                                                      Value="480" />

                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>

                  </BeginStoryboard>

                </EventTrigger>

            </Canvas.Triggers>

        </Canvas>

以上是对控件的单个属性值进行变化。

如果需要对控件的多个属性值进行更改，代码如下：

        <Canvas Background="AntiqueWhite"

                 >

            <Ellipse Name="elips"

                     Width="48"

                     Height="48"

                     Fill="Red"

                     Canvas.Left="480"

                     Canvas.Top="96" />

            <Canvas.Triggers>

                <EventTrigger RoutedEvent="Canvas.Loaded">

                    <BeginStoryboard>

                        <Storyboard >

                            <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"

                                                           AutoReverse="True"

                                                           Duration="0:0:10"

                                                           Storyboard.TargetName="elips"

                                                           Storyboard.TargetProperty="(Canvas.Left)">

                                <LinearDoubleKeyFrame KeyTime="0:0:5"

                                                      Value="0" />

                                <LinearDoubleKeyFrame KeyTime="0:0:5.5"

                                                      Value="48" />

                                <LinearDoubleKeyFrame KeyTime="0:0:8"

                                                      Value="244" />

                                <LinearDoubleKeyFrame KeyTime="0:0:9"

                                                      Value="480" />

                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever"

                                                           AutoReverse="True"

                                                           Duration="0:0:10"

                                                           Storyboard.TargetName="elips"

                                                           Storyboard.TargetProperty="(Canvas.Top)">

                                <LinearDoubleKeyFrame KeyTime="0:0:2"

                                                      Value="0" />

                                <LinearDoubleKeyFrame KeyTime="0:0:4"

                                                      Value="58" />

                                <LinearDoubleKeyFrame KeyTime="0:0:6"

                                                      Value="0" />

                                <LinearDoubleKeyFrame KeyTime="0:0:9"

                                                      Value="96" />

                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger>

            </Canvas.Triggers>

        </Canvas>

RepeatBehavior="Forever" 为一直重复这个动画。

AutoReverse="True" 为来回运行。如果为false则只单程运行。

Duration="0:0:10" 为运行总时间。

2、解释：

球的开始位置是（480，96），这是通过Canvas.Left和Canvas.Top两个附加属性设置的。

动画改变Canvas.Left属性值，

第1个LinearDoubleKeyFrame 表示在动画的前5秒Canvas.Left 属性值从480改变为0，意味着球会匀速地向左运动直到Canvas的最左侧；

第2个LinearDoubleKeyFrame表示在接下来的0.5秒Canvas.Left属性值从0改变为48，意味着球会向右匀速运动；

第3个KeyFrame是一个DiscreteDoubleKeyFrame，表示在2.5秒后，Canvas.Left属性值会从48直接变化为244；

第4个DiscreteDoubleKeyFrame，表示Canvas.Left会在下秒直接变化为480。

即球在6秒时突然由横坐标48的位置突然跳到144的位置，然后在7秒时突然从144的位置跳到240的位置。

下一轮开始的时候，球回原路返回至起点。

开始下一轮的循环。

3、其它

DoubleKeyFrame对应的几种插值算法的关键帧为：

LinearDoubleKeyFrame、DiscreteDoubleKeyFrame、SplineDoubleKeyFrame、EasingDoubleKeyFrame。

在关键帧动画中，我们除了定义关键帧外，还需要定义两个关键帧之间的插值算法，这样系统才能根据关键帧和插值算法生成中间状态。WPF系统内置四种插值算法：

线性：两个关键帧之间均匀变化
离散：两个关键帧之间突变（到达时间点的时候硬切换，没有过渡效果）
样条：使用贝塞尔曲线实现更精确的加速和减速控制
缓动：使用缓动函数曲线实现弹性变化

综上来看，线性算法最常用，样条算法能实现精准加速和减速控制。离散的这种硬切换的效果虽然看起来没有什么动画效果，但用于连接关键帧还是比较常用的。另外在一些硬过渡的地方也是能用到的，例如实现闪烁效果。

这几种算法的具体效果这里就不做更多的介绍了，感兴趣的朋友可以看看如下两个链接中的描述和例子：

值得一提的是，并不是所有关键帧动画都支持这几种算法的，具体支持情况请参看MSDN：关键帧动画概述。当然，对于不支持的也是可以自己手动实现的。

关键帧的时间点（KeyTime）

关键帧的时间点由IKeyFrame.KeyTime属性指定。它是一个KeyTime类型，它有如下几种取值类型：

时间点TimeSpan：靠TimeSpan直接决定时间点，可以通过函数KeyTime.FromTimeSpan()创建，也可以直接用TimeSpan隐式转换。
相对时间Percent：指定的是百分比，通过时间线的Duration来联合决定对应的时间点。通过函数KeyTime.FromPercent()创建。
特殊值Uniform：时间线平均分布每个关键帧所需要的时间。通过函数KeyTime.Uniform创建。
特殊值Paced：间线按固定的帧率分配所需时间，这种情况下，变化大的关键帧分配时间长，变化小的关键帧分配时间段。通过函数KeyTime.Paced创建。

用代码创建的方式这儿就不举例了，这里就仅仅列举一下如何在XAML中表示这几种时间：

4、后台实现

例如，改变按钮宽度的例子，如果我们要实现如下效果：

在2秒时将宽度从 0变为350
在7秒时将宽度变为50
在9秒的时候将其宽度变为200

    var widthAnimation = new DoubleAnimationUsingKeyFrames();

    var keyFrames = widthAnimation.KeyFrames;

    keyFrames.Add(new LinearDoubleKeyFrame(0, TimeSpan.FromSeconds(0)));

    keyFrames.Add(new LinearDoubleKeyFrame(350, TimeSpan.FromSeconds(2)));

    keyFrames.Add(new LinearDoubleKeyFrame(50, TimeSpan.FromSeconds(7)));

    keyFrames.Add(new LinearDoubleKeyFrame(200, TimeSpan.FromSeconds(9)));

    button.BeginAnimation(WidthProperty, widthAnimation);