动画的曲线的介绍
动画曲线(Animation Curve)是一种用于描述动画属性值随时间变化的图形工具。
我们可以通过给自己的动画片段设定不同的动画曲线,使动画效果具有不同表现力。
常见的动画曲线设定有:
- 线性(Linear):速度平稳变化。
- 缓入(Ease In):开始时,缓缓的加速。
- 缓出(Ease Out):要结束时,缓缓的减速。
- 缓入缓出(Ease In Out):开始时,缓缓的加速;要结束时,再缓缓的减速。
- 结束回弹(Back Out):要结束时,先超越目标值后,再回到目标值。
- 开始回弹(Back In):开始时,先向 “目标值的反向值” 过渡,再向目标值过渡。
下面请看详细报道:
线性(Linear):速度平稳变化。

示例动画1(汽车位移):
示例动画2(风扇旋转):
线性 无加速或减速,适合重复单调的动画,例如 “风车旋转”。
缓入(Ease In):开始时,缓缓的加速。

示例动画:
缓入 可模拟物体开始运动时,受惯性影响由慢逐渐加速的过程。
缓出(Ease Out):要结束时,缓缓的减速。

示例动画:
缓出 可模拟物体结束运动时,受惯性影响逐渐减速的过程。
缓入缓出(Ease In Out):开始时,缓缓的加速;要结束时,再缓缓的减速。

示例动画:
缓入缓出 结合了缓入和缓出的曲线,开始和结束时速度渐变,中间保持较快的速度。
结束回弹(Back Out):要结束时,先超越目标值后,再回到目标值。

示例动画1(汽车位移):
示例动画2(汽车缩放):
结束回弹 模拟物体受力后出现的弹性变化,给人一种自然的感觉。
开始回弹(Back In):开始时,先向 “目标值的反向值” 过渡,再向目标值过渡。

示例动画1(汽车位移):
示例动画2(汽车缩放):
开始回弹 给人一种 “先蓄力,再发力” 的感觉,能增强趣味性。
DoTween插件中的 动画曲线
为动画设定 动画曲线
Dotween每个动画都是一个TweenerCore对象,通过TweenerCore对象下的SetEase拓展方法可以设定一个 Ease(缓动)枚举值,通过设定这个Ease枚举值,就能决定动画要采用哪种动画曲线。
首先了解一下DoTween的Ease枚举:
动画对象(TweenerCore)如果没有调用SetEase(),则其默认设定为 Ease.Unset,此时动画曲线与Ease.OutQuad(二次方曲线缓出)表现一致。
Ease枚举 经过整理后,其对应动画曲线可分为4类:
1. 线性
2. 缓入缓出系列
图片源自 Tweener Documentation and Language Reference
不同类型的缓入缓出,主要差别在于动画开始和结束时的速度变化。
动画示例:
3. 弹性系列
动画示例1(位移):
动画示例2(缩放):
- 其中Elastic一类的,可以使用下面重载函数,来控制弹性振动 幅度(amplitude)和频率(period【周期】)。其中amplitude默认值为1.70158,period默认值为0(范围建议[-1,1],越接近0频率越高)。
SetEase(Ease ease, float amplitude, float period)
不同 amplitude 和 period 的OutElastic曲线示例:
- 其中Back一类的,可以使用下面重载函数,来控制超越值(overshoot)。overshoot默认值为1.70158,调整此值可改变超出边界的幅度。
SetEase(Ease ease, float overshoot)
不同 overshoot 曲线示例:
4. 闪烁
这类Ease能方便实现属性值来回变(ping-pong)的效果。个人感觉很多时候用不到此类型,或着说很多时候直接用循环动画实现了,所以暂不深入研究了,下面给出简单实验的曲线。
注意使用此类Ease时,要用下面这个重载函数:
SetEase(Ease ease, float amplitude, float period)
自定义动画曲线
实现一个 EaseFunction 委托:
例如实现 “OutBack(结束回弹)” (这里只用到了前两个参数):
public static float OutBackEase(float time, float duration, float overshootOrAmplitude, float period)
{
var t = time / duration;
var s = 1.70158f;
return --t * t * ((s + 1) * t + s) + 1;
}
然后SetEase使用对应的重载函数即可:
//重载函数:自定义Ease
public static T SetEase<T>(this T t, EaseFunction customEase) where T : Tween;