JS で自作するトゥイーン

GSAP / anime.js / motion などのライブラリを使う前に、「中で何が起きているか」を理解する。 rAF + 補間 + イージング の 3 点セットだけで、トゥイーン / キーフレーム / タイムライン / スプリングまで組める。

このノートの目的

• JS でアニメーションをライブラリ無しで書ける
• GSAP / anime.js / motion / framer-motion の裏側が分かる
• イージング関数を理解して使い分けられる
• キーフレーム・タイムラインを設計できる
• スプリング（バネ）系の動きを物理ベースで作れる

アニメーションの正体

画面上でなめらかに動いて見えるのは、毎フレーム少しずつ値を変えて描き直しているだけ。 コアは次の 3 つに集約される。

   時間 (t)
   ──────────────────▶
0% ────────────────── 100%

[1] 0〜1 に正規化       (経過時間 / 全体時間)
[2] イージングで歪める  (linear / easeOutQuad / etc)
[3] 値を補間            (lerp(start, end, t))
[4] 適用               (element.style.transform = ...)
      

30 行のミニ実装

ライブラリを使わず、requestAnimationFrame + lerp + イージングで動くトゥイーン:

function tween({ from, to, duration, easing = (t) => t, onUpdate }) {
  return new Promise((resolve) => {
    const start = performance.now()
    function frame(now) {
      const t = Math.min((now - start) / duration, 1)
      const eased = easing(t)
      const value = from + (to - from) * eased
      onUpdate(value)
      if (t < 1) requestAnimationFrame(frame)
      else resolve()
    }
    requestAnimationFrame(frame)
  })
}

// 使い方
const box = document.querySelector("#box")
await tween({
  from: 0, to: 300, duration: 800,
  easing: (t) => 1 - Math.pow(1 - t, 3),  // easeOutCubic
  onUpdate: (x) => {
    box.style.transform = `translateX(${x}px)`
  }
})

これが世のすべてのトゥイーンの最小核。あとはこれを「複数値同時」「複数アニメーション直列」 「逆再生 / ループ / 一時停止」… と拡張していくだけ。

用語の整理

このセクションの読み方

1. requestAnimationFrame — 時間管理の基礎
2. 補間 — 線形・カラー・配列・角度
3. イージング関数 — 30 種類の実装と使い分け
4. Tween クラス自作 — Promise / chaining / 制御
5. キーフレーム — 多段・スプライン・パス
6. タイムライン — 直列・並列・スクラブ
7. スプリング — バネの物理
8. 最適化と注意点 — 60fps を守る

ライブラリと自作の使い分け

本ノートで作るもの（最終形）

• 10 行の lerp と 30 行の tween 関数
• 30 種類のイージング関数（easings.net 互換）
• Promise ベース・チェイン可能な Tween クラス
• キーフレーム + スプライン補間
• 並列・直列・ネスト対応のタイムライン
• バネシミュレーション（質量・剛性・減衰）
• スクロール連動・スクラブ可能なシークバー

ブラウザ標準も知っておく

• CSS Transitions: 簡単。状態変化のみ
• CSS Animations / @keyframes: 純 CSS で完結
• Web Animations API (WAAPI): element.animate(...)。CSS と JS のハイブリッド
• View Transition API: ページ遷移補間 (→ View Transition API)

簡単な演出なら CSS / WAAPI で十分。複雑な演出やCanvas / WebGLでは JS で自前ループを回す方が綺麗にまとまる。