夕顔 | 缓动算法推导

const tween = {
    linear: function(t, b, c, d) {
        return c * t / d + b
    },
    easeIn: function(t, b, c, d) {
        return c * (t /= d) * t + b
    },
    easeOut: function(t, b, c, d) {
        return b + c * (- t * t + 2 * t)
    },
    strongEaseIn: function(t, b, c, d) {
        return c * (t /= d) * t * t * t * t + b
    },
    strongEaseOut: function(t, b, c, d) {
        return c * ((t = t / d - 1) * t * t * t + 1) + b 
    },
}

首先说明一下四个参数代表的含义

• t : 动画已消耗的时间
• b : 小球原始位置
• c : 小球目标位置
• d : 动画持续总时间
  其中b、c、d我们都可以看作常量，所以小球的运动轨迹其实是一个关于t的函数曲线。下面我们对上述算法进行抽象,我们把运动的总值设为y,运动时间设为x。

---

linear

//linear
y = c * x / d + b
  = c / d * x + b
  = a * x + b

非常典型的线性函数。

---

easeIn

strongEaseIn

//easeIn
y = c * (x /= d) * x + b
  = c * (x / d) * (x / d) + b
  = c / d ^ 2 * x ^ 2 + b
  = a * x ^ 2 + b

//strongEaseIn
y = a * x ^ 5 + b

看曲线图可以明显看出是平滑进入的。

至于什么叫strongEaseIn，自己看图体会。

---

easeOut

strongEaseOut

// easeOut
 y = b + c * (- x * x + 2 * x)
//strongEaseOut
y = c * ((x = x / d - 1) * x * x * x + 1) + b