Unity 动画曲线研究（Dotween插件）

动画的曲线的介绍

动画曲线（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;