shigureni.dev

等速でなく、加減速で

0 から 1 へ進む値を、まっすぐ等速で動かすと、止まり際も走り出しも一定の速さになる。その進み具合 t に曲線をかけて、両端でゆっくり、真ん中で速く動かす。同じ移動でも止まり際が滑らかになる。

イージングは、進行度 t（0〜1）を別の t'（0〜1）へ写す関数の一族。easeInOut は両端で導関数（速度）が 0 になり、中央で最大になる曲線で、加速して減速する動きを作る。easeOut は始点だけ速く終点で減速、easeIn は逆。Robert Penner がまとめた式の集まりが広く使われ、CSS の cubic-bezier() や ease-in-out も同じ発想。等速（線形）は機械の動き、加減速はばねや筋肉のような物理を持つ動きに近い。

線形は t がそのまま進む。easeInOut(t) は t < 0.5 で 2t²、後半で 1 - (-2t+2)²/2 の二本の放物線を繋いだ曲線になる。

const easeInOut = (t) => (t < 0.5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2)

export default (c) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const m = 24
  let t = 0

c.fillStyle = colors.paper
  c.fillRect(0, 0, w, h)

return () => {
    c.fillStyle = colors.paper
    c.fillRect(0, 0, w, h)

t += 0.008
    if (t > 1) t = 0

// カーブそのものを描く
    c.strokeStyle = colors.tint(118)
    c.lineWidth = 1.5
    c.beginPath()
    for (let i = 0; i <= 60; i++) {
      const u = i / 60
      const cx = m + u * (w - 2 * m)
      const cy = h - m - easeInOut(u) * (h - 2 * m)
      if (i === 0) c.moveTo(cx, cy)
      else c.lineTo(cx, cy)
    }
    c.stroke()

// 上の線は等速、下の線は ease。同じ時間で進み方が違う
    const yTop = m
    const yBot = h - m
    c.fillStyle = colors.tint(78)
    c.beginPath()
    c.arc(m + t * (w - 2 * m), yTop, 5, 0, Math.PI * 2)
    c.fill()
    c.fillStyle = colors.ink
    c.beginPath()
    c.arc(m + easeInOut(t) * (w - 2 * m), yBot, 5, 0, Math.PI * 2)
    c.fill()
  }
}

上の灰色の点は t をそのまま横位置に使う等速で、左から右へ一定の速さで進む。下の黒い点は easeInOut(t) を通していて、両端でためて真ん中で走る。二点とも t が 1 に達したら左端へ戻る。中央の曲線が easeInOut の形で、両端の傾きが寝て中央で立っているぶん、黒い点が止まり際と走り出しで遅くなる。

easeInOut の式を 1 - (1 - t)³ の easeOut（最後だけ減速）に差し替えると、走り出しは速く終点で滑り込む別の動きになる。曲線を取り替えるだけで、同じ時間・同じ距離のまま進み方が変わる。