shigureni.dev

キーで取り直す動き — トゥイーン

開始時刻を持っておいて、経過を継続時間で割れば進行度 u が出る。それを ease に通して、開始位置 from と目標 to のあいだを補間すると、点が目標へ滑り込む。

トゥイーンは tween（in-between）の略で、二つの状態のあいだのコマを埋めるアニメーション用語。原画と原画のあいだを描く中割りの担当者が tweener だったのが語源。プログラム上は from・to・継続時間・開始時刻の四つを持てば、任意の時刻の中間値を from + (to - from) * ease(u) で計算できる。

下はキーで標的を取り直す版。クリックして矢印キーを押すたび、その方向に新しい目標を置いて、点が ease で滑り込む。動いている途中で押せば、いまの位置から取り直す。割り込みが効く。

const easeOut = (t) => 1 - (1 - t) ** 3

export default (c, signal) => {
  const w = c.canvas.width
  const h = c.canvas.height
  const key = keyboard(signal)
  const dur = 28 // フレーム数で継続時間

const tw = {
    fromX: w * 0.5,
    fromY: h * 0.5,
    toX: w * 0.5,
    toY: h * 0.5,
    t: dur,
  }
  let x = w * 0.5
  let y = h * 0.5

const retarget = (dx, dy) => {
    tw.fromX = x
    tw.fromY = y
    tw.toX = Math.max(20, Math.min(w - 20, x + dx))
    tw.toY = Math.max(20, Math.min(h - 20, y + dy))
    tw.t = 0
  }

key.onKeydown((event) => {
    if (event.repeat) return
    if (event.key === "ArrowLeft") retarget(-70, 0)
    else if (event.key === "ArrowRight") retarget(70, 0)
    else if (event.key === "ArrowUp") retarget(0, -70)
    else if (event.key === "ArrowDown") retarget(0, 70)
  })

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

return () => {
    c.fillStyle = colors.tintAlpha(238, 0.18)
    c.fillRect(0, 0, w, h)

if (tw.t < dur) {
      tw.t += 1
      const u = easeOut(Math.min(1, tw.t / dur))
      x = tw.fromX + (tw.toX - tw.fromX) * u
      y = tw.fromY + (tw.toY - tw.fromY) * u
    }

c.fillStyle = colors.tint(98)
    c.beginPath()
    c.arc(tw.toX, tw.toY, 4, 0, Math.PI * 2)
    c.fill()

c.fillStyle = colors.ink
    c.beginPath()
    c.arc(x, y, 5, 0, Math.PI * 2)
    c.fill()
  }
}

進行度 u は経過 t を継続時間 dur で割ってクランプしただけ。それを easeOut に通して、開始位置 from と目標 to のあいだを補間する。矢印を押すと、いまの位置から新しい目標へ向けて t を0にリセットする。動いている最中に別方向を押すと、その場から取り直すから、ぬるっと方向が変わる。灰色の点が目標で、黒い点が ease で追いつく。残像が薄く尾を引くので、滑り込む軌跡が残る。