与 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" />
参考资料:
关键帧动画概述