WPF中的动画——（五）关键帧动画

与 From/To/By 动画相似，关键帧动画以也能够以动画形式显示目标属性值。 和From/To/By 动画不一样的是， From/To/By 动画只能控制在两个状态之间变化，而关键帧动画则能够在多个状态之间变化，例如，对于前面那个改变按钮宽度的例子，若是咱们要实现以下效果：

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

虽然咱们能够用三个From/To/By 动画组合实现相似效果，可是这样一来麻烦，二来要感知动画完成事件，不方便在XAML中使用。此时咱们则可使用关键帧动画来快速实现这一过程。

    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);

能够看出，关键帧动画将每个状态制定为一个关键帧，关键帧动画时间线自动链接各个关键帧，并计算过渡状态，完成动画。所以，某种程度上，咱们也能够把From/To/By 动画当作是只有两个状态的特殊关键帧动画。

 

内置的关键帧动画

与 From/To/By 动画同样，在名字空间System.Windows.Media.Animation 下也内置了大量关键帧动画，它们的命名规则是：    

    <类型> AnimationUsingKeyFrames

例如这儿使用的DoubleAnimationUsingKeyFrames，其它类型请参看MSDN：关键帧动画概述，这里就不列举了。

 

插值算法

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

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

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

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

• http://msdn.microsoft.com/zh-cn/library/ms742524(v=vs.110).aspx
• http://msdn.microsoft.com/zh-cn/library/System.Windows.Media.Animation.LinearDoubleKeyFrame(v=vs.110).aspx

值得一提的是，并非全部关键帧动画都支持这几种算法的，具体支持状况请参看MSDN：关键帧动画概述。 固然，对于不支持的也是能够本身手动实现的。

 

 

关键帧（IKeyFrame）

前面已经介绍过，一个关键帧主要有时间点和插值算法两部分组成，在WPF中，不一样的关键帧动画对应着同的关键帧对象，它们都继承自IKeyFrame接口，其命名规则为：

    <类型> KeyFrame

例如，DoubleAnimationUsingKeyFrames对应的是DoubleKeyFrame，但因为这个类并无制定插值算法，它只是一个抽象基类，再加上插值算法后对应的关键帧类命名规范为：

    <插值算法><类型> KeyFrame

例如，DoubleKeyFrame对应的几种插值算法的关键帧为：LinearDoubleKeyFrame、DiscreteDoubleKeyFrame、SplineDoubleKeyFrame、EasingDoubleKeyFrame。这些关键帧对象使用的方式都比较相似，这里就很少介绍了。

 

关键帧的时间点（KeyTime）

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

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

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

    <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
    <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
    <LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
    <LinearDoubleKeyFrame Value="100" KeyTime="Paced" />

参考资料：

关键帧动画概述