WPF中的动画——（五）关键帧动画-白红宇

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

阅读量：5235 次

发布时间：2019-06-14

本文共 2425 字，大约阅读时间需要 8 分钟。

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

虽然我们可以用三个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系统内置四种插值算法：

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

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

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

关键帧（IKeyFrame）

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

<类型> KeyFrame

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

<插值算法><类型> KeyFrame

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

关键帧的时间点（KeyTime）

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

时间点TimeSpan：靠TimeSpan直接决定时间点，可以通过函数
KeyTime.FromTimeSpan()
创建，也可以直接用TimeSpan隐式转换。

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

参考资料：

转载于:https://www.cnblogs.com/TianFang/p/4060397.html

你可能感兴趣的文章