◆ Codex Animatus ◆ A Tome on the Art of Motion ◆

The Tome of Easing

✦ Easingの魔導書 ✦

❖

ゲームアニメーションにおいて、Easing関数を意識するだけで表現は劇的に豊かになる。
この古書は、直線的な動きと曲線的な動きの違いを、剣と魔法の世界で解き明かす。

🏹

THE WARRIOR'S THROW

戦士の投擲術

LINEAR 兵士の行軍 · 直線

EASE OUT 放たれし矢 · 減速

⚔ WEAPON

◈ LESSON投擲の現実感は到達直前の減速と放射直後の初速、そして重力による弧の高さで決まる。Linearだけでは「矢が空中を滑って行く」違和感が拭えない。

⚔

SWING & ROTATION

剣と斧の回転動作

LINEAR

兵士の行軍

-90°

EASE OUT BACK

英雄の抜刀

-90°

EASE OUT ELASTIC

スライムの震え

-90°

◈ LESSONEase Out Back で一度通り過ぎて戻り「シャキン」と止まる。Elastic だと震えて収まる。

📖

THE GRAND CODEX

Easing大全 — 総覧

⚑Linear兵士の行軍 · 等速運動一定速度。機械的で生命感がない。ゴーレムの歩みのよう。

◈ CONSTANT VELOCITY · 毎フレーム更新

加速度なし。初速を与え、毎フレーム同じ量だけ進める。

// 初期化
let velocity = { x: 300, y: 0 };   // px/s

// 毎フレーム
function update(dt) {
  position.x += velocity.x * dt;
  position.y += velocity.y * dt;
}

※ 真空中を慣性で飛ぶような非現実的な動き。ほぼ使わない。

✦Ease In Quad魔力チャージ · 等加速度運動ゆっくり始まり徐々に加速。呪文詠唱や溜め攻撃に最適。

◈ CONSTANT ACCELERATION · 毎フレーム更新

一定の加速度を加え続けるだけ。静止から始めれば変位は t² に比例する。

// 初期化
let velocity     = { x: 0, y: 0 };
const acceleration = { x: 0, y: 980 };   // 重力 or 推力

// 毎フレーム
function update(dt) {
  velocity.x += acceleration.x * dt;
  velocity.y += acceleration.y * dt;
  position.x += velocity.x * dt;
  position.y += velocity.y * dt;
}

※ 重力落下・推進剤点火の加速・溜め動作の初動などに。

➴Ease Out Quad放たれし矢 · 線形ドラッグ減速勢いよく始まり減速。投擲武器の着弾直前に重みを感じる。

◈ LINEAR DRAG · 毎フレーム更新

初速を与え、速度に比例したブレーキで減速。数フレームかけて0へ近づく。

// 初期化
let velocity = { x: 400, y: 0 };
const drag = 2.0;                      // 抗力係数 (大きいほど早く減速)

// 毎フレーム (暗黙オイラーで dt 大でも安定)
function update(dt) {
  const k = 1 / (1 + drag * dt);
  velocity.x *= k;
  velocity.y *= k;
  position.x += velocity.x * dt;
  position.y += velocity.y * dt;
}

※ 矢・ダッシュ・スケート的な「勢いが抜ける」表現に最適。

∿Ease In-Out Quad定規の滑走 · 柔らかめの臨界スプリング両端で滑らか、中央最速。クセのない素朴なS字。

◈ SOFT CRITICAL SPRING · 毎フレーム更新

Cubicより剛性を落とし、臨界減衰で静かに目標へ寄せる。クセのない汎用追従。

// 初期化
let velocity = 0;
const stiffness = 25;
const damping   = 2 * Math.sqrt(stiffness);  // 臨界 ≈ 10

// 毎フレーム
function update(dt, target) {
  const dx = target - position;
  const a  = stiffness * dx - damping * velocity;
  velocity += a * dt;
  position += velocity * dt;
}

※ UIの控えめな追従、カーソル・カメラの微調整に。主張しすぎない。

☄Ease In Cubic隕石落下 · 一定躍度（jerk）最後に一気に加速。重力落下や隕石魔法の表現に。

◈ CONSTANT JERK · 毎フレーム更新

加速度そのものが時間に比例して増え続ける。初速ゼロで始めれば変位は t³。

// 初期化
let velocity     = 0;
let acceleration = 0;
const jerk = 120;                      // 加速度の変化率 (px/s³)

// 毎フレーム
function update(dt) {
  acceleration += jerk * dt;
  velocity     += acceleration * dt;
  position     += velocity * dt;
}

※ 隕石落下・終盤で一気に迫る呪文など、じわじわ加速していく動き。

➵Ease Out Cubic英雄の着地 · 2次ドラッグ3乗の減速。Quadより序盤が鋭く、終盤が柔らかい。

◈ QUADRATIC DRAG · 毎フレーム更新

速度の2乗に比例する抵抗（空気抵抗のモデル）。高速域ほど急激に減速する。

// 初期化
let velocity = 500;
const k = 0.003;                       // 二次抗力係数

// 毎フレーム
function update(dt) {
  velocity -= k * velocity * Math.abs(velocity) * dt;
  position += velocity * dt;
}

※ 弾道・水流など速度に強く依存する抵抗のある環境。Quadとの違いは序盤の鋭さ。

⚔Ease In-Out Cubic聖騎士の突進 · 臨界減衰スプリング滑らかに加速し滑らかに停止。カメラ移動や王の歩みに。

◈ CRITICALLY-DAMPED SPRING · 毎フレーム更新

目標に向かってスプリングで引く。臨界減衰にすれば両端で静かに、振動なしで収束する。

// 初期化
let velocity = 0;
const stiffness = 50;                  // 剛性
const damping   = 2 * Math.sqrt(stiffness);  // 臨界減衰 (≈14.14)

// 毎フレーム (target は「今向かっている点」でOK。事前に到達時間は不要)
function update(dt, target) {
  const dx = target - position;
  const a  = stiffness * dx - damping * velocity;
  velocity += a * dt;
  position += velocity * dt;
}

※ カメラ追従・メニューの滑らかな出現・キャラクタのホーミング等。

⟲Ease In Back呪文の予備動作 · 逆方向のタメ → 順方向の加速一度後ろに引いてから前へ。溜め・予備動作の表現に最適。

◈ WINDUP → LAUNCH · 毎フレーム更新

まず短時間だけ目標と逆向きに引き、それから本命の加速。予備動作が生まれる。

// 初期化
let velocity = 0;
let phase = 'windup';                  // 'windup' → 'launch'
let windupTimer = 0.12;                // 振りかぶり時間 (秒)
const windupAccel = -220;              // 逆方向への引き
const launchAccel = 420;               // 本命の押し

// 毎フレーム
function update(dt) {
  if (phase === 'windup') {
    velocity += windupAccel * dt;
    windupTimer -= dt;
    if (windupTimer <= 0) phase = 'launch';
  } else {
    velocity += launchAccel * dt;
  }
  position += velocity * dt;
}

※ 呪文詠唱の振りかぶり、溜めパンチ、ダッシュ前の一歩引きなど。

⚔Ease Out Back英雄の抜刀 · アンダーダンプド・スプリング一度行き過ぎて戻る。剣の鞘抜きやメニュー出現に躍動感。

◈ UNDER-DAMPED SPRING · 毎フレーム更新

臨界より減衰が弱いスプリング。目標を一度行き過ぎてから戻るオーバーシュートが出る。

// 初期化
let velocity = 0;
const stiffness = 80;
const damping   = 6;                   // < 2*sqrt(stiffness) なので振動する

// 毎フレーム
function update(dt, target) {
  const dx = target - position;
  const a  = stiffness * dx - damping * velocity;
  velocity += a * dt;
  position += velocity * dt;
}

※ UIの決まり感、剣の抜刀の「キュッ」という止め。1往復で収まる。

⇋Ease In-Out Back呪印の展開 · 振りかぶり→アンダーダンプド到達両端でオーバーシュート。劇的な出現・消失のモーションに。

◈ WINDUP + OVERSHOOT · 毎フレーム更新

出発時に逆方向へ引いてから加速し、到達時にもオーバーシュート。2段階のドラマを持つ動作。

// 初期化
let velocity = 0;
let phase = 'windup';                  // windup → approach
let windupTimer = 0.1;
const windupAccel = -180;
const stiffness   = 90;
const damping     = 5;                 // 弱減衰

// 毎フレーム
function update(dt, target) {
  if (phase === 'windup') {
    velocity += windupAccel * dt;
    windupTimer -= dt;
    if (windupTimer <= 0) phase = 'approach';
  } else {
    const dx = target - position;
    const a  = stiffness * dx - damping * velocity;
    velocity += a * dt;
  }
  position += velocity * dt;
}

※ 決め技のエフェクト、モーダルの印象的な登場・退場に。

❂Ease Out Elasticスライムの震え · 低減衰スプリングバネのように震えて収束。宝箱オープンやゼリー系の敵に。

◈ LOW-DAMPING SPRING · 毎フレーム更新

さらに減衰を弱めた同じスプリングモデル。何度も揺れてから収束する。

// 初期化
let velocity = 0;
const stiffness = 120;
const damping   = 2;                   // 非常に小さい → 長く振動

// 毎フレーム
function update(dt, target) {
  const dx = target - position;
  const a  = stiffness * dx - damping * velocity;
  velocity += a * dt;
  position += velocity * dt;
}

※ 宝箱の開封、スライム敵、ゼリー素材の弾性など「震え」を表現。

◉Ease Out Bounce落下するポーション · 重力落下＋床反発床で跳ね返る物理挙動。アイテム落下やコイン収集に。

◈ GRAVITY + RESTITUTION · 毎フレーム更新

重力で落とし、床にぶつかったら速度を反転。反発係数で徐々に勢いが減る。

// 初期化
let velocity = { x: 0, y: 0 };
const gravity       = 980;             // px/s² (下向き)
const groundY       = 0;               // 床の Y 座標
const restitution   = 0.7;             // 0..1 の反発係数

// 毎フレーム
function update(dt) {
  velocity.y += gravity * dt;
  position.y += velocity.y * dt;

  if (position.y > groundY) {          // 床を突き抜けた
    position.y = groundY;              // 戻す
    velocity.y = -velocity.y * restitution;  // 反転＆減衰
  }
}

※ 落としたコインやポーション瓶の挙動。反発係数を下げるほど早く止まる。