与 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系统内置四种插值算法:

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

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

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

值得一提的是,并不是所有关键帧动画都支持这几种算法的,具体支持情况请参看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
" KeyTime="0:0:3" />
    <LinearDoubleKeyFrame
Value="100" KeyTime="30%" />
    <LinearDoubleKeyFrame
Value="100" KeyTime="Uniform" />
    <LinearDoubleKeyFrame
Value="100" KeyTime="Paced" />

参考资料:

关键帧动画概述

WPF中的动画——(五)关键帧动画的更多相关文章

  1. WPF中自动增加行(动画)的TextBox

    原文:WPF中自动增加行(动画)的TextBox WPF中自动增加行(动画)的TextBox WPF中的Textbox控件是可以自动换行的,只要设置TextWrapping属性为"Wrap& ...

  2. WPF中的PathAnimation(路径动画)

    原文:WPF中的PathAnimation(路径动画) WPF中的PathAnimation(路径动画)                                                 ...

  3. ios基础动画、关键帧动画、动画组、转场动画等

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  4. 核心动画基础动画(CABasicAnimation)关键帧动画

    1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATran ...

  5. html5--6-55 动画效果-关键帧动画

    html5--6-55 动画效果-关键帧动画 实例 @charset="UTF-8"; div{ width: 150px; height: 150px; font-size: 2 ...

  6. WPF动画之关键帧动画(2)

    XAML代码: <Window x:Class="关键帧动画.MainWindow" xmlns="http://schemas.microsoft.com/win ...

  7. IOS开发-属性动画和关键帧动画的使用

    CAMediaTiming是一个协议(protocol),CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类. 继承关系: CoreAnmiation 核心动画 简写CA ...

  8. iOS:核心动画之关键帧动画CAKeyframeAnimation

    CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能 ...

  9. WPF中使用RenderTransformOrigin来控制动画的起点

    Render :渲染:Transform:动画:Origin:起点 RenderTransformOrigin:渲染动画的起点 取值为一个坐标的形式  取值范围: 0,0 到 1,1 0,0:表示左上 ...

  10. 11.css3动画--自定义关键帧动画--@keyframes/animation

    @keyframes设定动画规则,可以理解为动画的剧本. Name.自定义一个动画名称. 0-100%/from...to.... 需要变化的css样式属性. animation所有动画属性的简写.( ...

随机推荐

  1. 005 JAVA多线程和并发基础面试问答(转载)

    原文链接:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-answers/ 多线程和并发问题是Ja ...

  2. BZOJ 2460: [BeiJing2011]元素 贪心,线性基

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2460 解法:从大到小排序,依次贪心的添加到当前集合就可以了,需要动态维护线性基.用拟阵证明 ...

  3. RadioButton 带下划线切换的案例

    xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id=& ...

  4. PHP常用函数总结(180多个)

    PHP常用函数总结 数学函数 1.abs(): 求绝对值 $abs = abs(-4.2); //4.2 数字绝对值数字 2.ceil(): 进一法取整 echo ceil(9.999); // 10 ...

  5. C++变量类型转换

    1:int转换为CString CString str; str.Format("As string: %d", int); 2:double转换为CString CString ...

  6. 9:django 表单

    django自带表单系统,这个表单系统不仅可以定义属性名,还可以自己定义验证,更有自己自带的错误提示系统 这节我们仅仅粗略的来看一下django表单系统的入门运用(具体的实在太多东西,主要是我觉得有很 ...

  7. Solr产品化部署

    1.下载solr-6.4.1.tgz到任意目录 2.执行tar xzf solr-6.4.1.tgz solr-6.4.1/bin/install_solr_service.sh --strip-co ...

  8. python_day4学习笔记

    一.内置函数

  9. ZOJ-3430

    Detect the Virus  Time Limit: 2 Seconds      Memory Limit: 65536 KB One day, Nobita found that his c ...

  10. hdu 3308(线段树区间合并)

    LCIS Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...