cancelAnimationFrameの正しい使い方と設計パターン

1. まずは結論

requestAnimationFrame は「動かす」ための関数でした。
では 止めるときは？

👉 それが cancelAnimationFrame です。

const id = requestAnimationFrame(loop);
cancelAnimationFrame(id);

これだけです。

…でも実はここに、初心者がハマりやすい罠があります。

2. なぜ「止める設計」が必要なのか？

#01 requestAnimationFrameの使い方 の記事で見たように、requestAnimationFrame はこう書きました。

function loop() {
  requestAnimationFrame(loop);
}

これはどういう状態でしょう？

👉 無限ループです。

止める処理を書かない限り、永遠に動き続けます。

放置するとどうなる？

• CPUを使い続ける
• メモリを消費し続ける
• 多重起動するとバグる

アニメーションは
「動かす」より「止める」方が設計として重要です。

3. 正しい基本形

ステップ①：IDを保存する

let animationId;

function loop() {
  animationId = requestAnimationFrame(loop);
}

ここが大事です。

requestAnimationFrame() は
数字（ID）を返します。

その番号を保存しておきます。

ステップ②：止める

cancelAnimationFrame(animationId);

これでストップできます。

4. よくある間違い

❌ IDを保存していない

function loop() {
  requestAnimationFrame(loop);
}

cancelAnimationFrame(loop); // ❌ 止まらない

cancelAnimationFrame に渡すのは
関数ではなく、ID です。

❌ 多重起動

button.addEventListener("click", () => {
  requestAnimationFrame(loop);
});

これを何回も押すと…

👉 ループがどんどん増えます。

結果：

• 動きが速くなる
• CPUが上がる
• 何が起きてるかわからなくなる

5. 設計としての正解パターン

フラグ管理型

let animationId;
let isRunning = false;

function loop() {
  if (!isRunning) return;
  animationId = requestAnimationFrame(loop);
}

function start() {
  if (isRunning) return;
  isRunning = true;
  loop();
}

function stop() {
  isRunning = false;
  cancelAnimationFrame(animationId);
}

これが基本設計パターンです。

ポイント：

• 二重起動を防ぐ
• 状態を明確にする
• 必ず停止できるようにする

6. なぜ「設計」が重要なのか？

#04 フレームレートとパフォーマンス の記事で学んだように、
ブラウザは 60fps で動こうとします。

でも、

• ループが2つ
• ループが3つ
• 止め忘れ

が起きるとどうなるか？

👉 フレームレートが崩れます。

アニメーション設計は
時間管理 × 停止管理 です。

7.実験：多重起動するとどうなる？

• ボタンを押すとアニメーション開始
• Stopボタンなし
• 何回もStartできる（ループが増殖する）

実験から学ぶこと

• rAFは勝手に止まらない
• ID管理が命
• 設計をミスると即バグる

8.まとめ

cancelAnimationFrame はただの停止関数ではありません。

これは：

「アニメーションの寿命を管理する関数」

です。

動かすことより、
きちんと止められることの方が重要。

9.次の記事

→ #06 減速ルーレット（実践）

ここで、

• easing
• deltaTime
• 停止設計

がすべてつながります。

いよいよ実戦です。

🔎 このラボの全体像はこちら
→ UI Architecture Roadmap