WPF -- 动画（缓冲动画）

最新推荐文章于 2025-03-13 10:45:14 发布

yang_B621

最新推荐文章于 2025-03-13 10:45:14 发布

阅读量1.6k

点赞数

分类专栏：动画文章标签：动画

本文链接：https://blog.csdn.net/qq_23018459/article/details/79986823

版权

动画专栏收录该内容

4 篇文章

订阅专栏

理解Animation Easing（缓冲动画）

在Silverlight中每个功能都会继承自不同的基类，实现不同的功能效果，Animation Easing（缓冲动画）也是一样，继承自EasingFunctionBase基类，在该类中，提供了一个属性EasingMode，通过该属性可以控件缓冲动画效果模式。Animation Easing（缓冲动画）效果模式被封装成一个枚举类型，分别是EaseIn,EaseOut,EaseInOut.Animation Easing（缓冲动画）的效果模式是一个重要的概念，该属性直接决定Animation Easing（缓冲动画）会在什么时候产生效果。这里我不想用过于官方的解释来说明这三种模式，根据我的使用体验，用自己的语言描述一下这三种动画模式的概念，

EaseIn, 简单的可以理解为将该缓冲动画效果应用在动画实例开始，也就是一开始动画，马上执行该Animation Easing（缓冲动画）效果；

EaseOut，简单的可以理解为将该缓冲动画效果应用在动画实例结束，也就是要结束动画前，马上执行该Animation Easing（缓冲动画）效果；

EaseInOut，简单的可以理解为将动画的全过程平均分为两部分，该缓冲动画效果应用在第一部分，分别将EaseIn应用在第一部分的开始，EaseOut应用在第二部分的结束。例如，有个10秒的动画，被应用EaseInOut模式，Silverlight会将该动画平分为两个5秒的动画，将EaseIn应用在第一个5秒动画的开始，然后将EaseOut在第二个5秒动画结束前应用。

对于三个效果模式的理解，我们将在后文实例中进行演示说明，这里仅需先对Animation Easing（缓冲动画）有个基础概念。作为软件设计人员和开发人员，应该都明白，所谓的动画效果，其实是计算机对于图形运行轨迹的计算不同，所产生的不同的视觉效果。而Animation Easing（缓冲动画）也是同理，在微软提供的11种Animation Easing（缓冲动画）动画中，运行了11个不同的方程式,从而产生11种动画效果。为了随后更好的理解这11种Animation Easing（缓冲动画）效果，首先需要了解一下最基础的方程式，通过方程式图形，可以大概明白动画运行效果。

上图的t是表示时间，而f(t)表示动画目标对象属性，曲线表示其动画轨迹效果，不同的时间段，对象属性不同。

看个例子说明，方程式图形效果，

上图BackEase动画效果，是属性变化前，先向相反的方向变化，然后随着时间的增加，属性而增加。例如，一个按钮，宽度由小变大，应用该效果后，按钮会先变小，然后迅速宽度变大。而上图f(t)则表示按钮的宽度，t表示时间，蓝色的曲线表示按钮宽度的变化过程，

根据以上的原理，我们来逐一学习一下微软提供的11种Animation Easing（缓冲动画）。在调用前需要了解以下几点：

1. 要调用默认的11种Animation Easing（缓冲动画）首先需要引用System.Windows.Media.Animation命名空间；

2. 由于这11中Animation Easing（缓冲动画）都是继承自同一个基类EasingFunctionBase,所以，都有EasingMode属性，也就是说都可以应用于EaseIn,EaseOut和EaseInOut；

3. Animation Easing（缓冲动画）是运用在帧动画基础上，在使用前，需要调用动画对象的EasingFunction属性。由于EasingFunction属性每次只能被一个Animation Easing（缓冲动画）调用，所以，不能将多个Animation Easing（缓冲动画）效果添加到同一个动画对象中，这点较重要，需要谨记。

对于11种Animation Easing（缓冲动画）效果，好友蝈蝈俊曾经详细介绍过，个人认为解释的恰到好处，容易理解，这里，我直接引用过来，另外，我补充了部分Easing动画的属性说明。（蝈蝈俊的Easing介绍原文）。

倒退缓冲（BackEase）：让动画在继续之前往后退一点。这有点象在斜坡上启动汽车，会往后倒退一点然后才前进。在BackEase中，有一个"Amplitude"属性，该属性可以简单理解为扩展宽度，也就是说动画继续之前往后退的宽度，默认设置为1，随着值的增加，倒退宽度也就越大。弹跳缓冲（BounceEase）：有弹回效果的动画，类似我们前面提到的篮球落下，弹起，再落下，即弹跳反冲。该效果中包含两个属性，"Bounces"是表示弹跳几次，"Bounciness"是表示弹跳的速度，越大会越慢。圆缓冲（CircleEase）：创建使用循环函数加速和/或减速的动画。基于三角函数（圆函数）来加速动画，一开始的加速度比较慢，越往后加速度越快。立方体缓冲（CubicEase）：创建使用公式

加速和/或减速的动画。与圆缓冲类似，但是是基于立方体函数的时间来产生一个一开始加速度较慢然后越来越快的动画。伸缩缓冲（ElasticEase）：创建表示弹簧在停止前来回振荡的动画。类似于弹跳缓冲（BounceEase），它会让一个值摆动直到停下为止。该效果包含两个属性，"Oscillations"表示伸缩的次数，"Springiness"表示伸缩的速度. 指数缓冲（ExponentialEase）：创建使用指数公式加速和/或减速的动画。类似于圆缓冲和立方体缓冲，只是加速度的值是按照指数来变化的。该效果包含属性"Exponent"，代表指数，越大效果越慢。乘方缓冲（PowerEase）：创建使用公式

（其中，p 等于 PowerEase.Power 属性）加速和/或减速的动画。这是一种指数缓冲，缓冲的值与时间的乘方成比例。该效果有一个"Power"属性，表示时间t的指数，如果Power=2，则和平方缓冲动画相同效果;Power=3则和立方体缓冲动画效果相同，依次类推. 平方缓冲（QuadraticEase）：创建使用公式