1. requestAnimationFrameとは？
requestAnimationFrameは、
ブラウザの描画タイミングに合わせて処理を実行するためのAPIです。
主に以下の用途で使われます。
- アニメーション
- スクロール連動UI
- ゲームループ
2.よくある疑問
多くの人がここでつまずきます。
- setTimeoutとの違いがわからない
- なぜrequestAnimationFrameが必要なのか
- どのタイミングで使うべきかわからない
この記事では、
「なぜ必要か → どう使うか → 実践」の順で解説します。
3.なぜrequestAnimationFrameを使うのか？
▶︎setTimeoutの問題
setTimeoutでアニメーションを書くとこうなります👇
- フレームとズレる
- カクつく
- 無駄な処理が増える
理由はシンプルで、
👉 ブラウザの描画タイミングと同期していないから
▶︎requestAnimationFrameの仕組み
requestAnimationFrameは、
👉 次の描画フレーム直前に処理を実行
します。
つまり👇
- 無駄な描画が減る
- 滑らかになる
- パフォーマンスが安定する
4.比較してみる
| 方法 | 問題 |
|---|---|
| setTimeout | 描画とズレる |
| setInterval | カクつきやすい |
| requestAnimationFrame | 最適化される |
5.基本的な使い方
まずは最小構成👇
function loop() {
// 処理を書く
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);👉 これで毎フレーム処理が実行されます
6.実践：アニメーションしてみる
const box = document.querySelector('.box');
let x = 0;
function animate() {
x += 2;
box.style.transform = `translateX(${x}px)`;
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);👉 要素が横に動きます
7.実験：requestAnimationFrameのフレーム間隔を確認する
requestAnimationFrameは「毎フレーム呼ばれる」と言われますが、
本当に一定間隔なのでしょうか？
実際に計測してみます👇
🔍観察ポイント
- フレーム間隔は一定ではない
- 約16ms前後（60fps）が目安
- 環境によってブレる
🔍なぜズレるのか？
これは👇
- CPU負荷
- タブの状態
- ブラウザの最適化
などが影響します
👉 つまり完全に一定ではない
🔍これが意味すること
👉 deltaTimeが必要になる
→ 次の記事で解説
8.どんなときに使う？
requestAnimationFrameは以下で使います👇
- スクロール連動アニメーション
- パララックス
- ドラッグUI
- ゲーム処理
👉 「滑らかさが必要なとき」全部
9.よくある間違い
❌ cancelしない
cancelAnimationFrame(id);👉 必要なときは止める
❌ 無限ループのまま放置
→ パフォーマンス悪化
❌ deltaTimeを考えない
→ FPSによって速度が変わる
（これは次の記事で詳しく解説）
10.次にやるべきこと
ここからが重要です👇
- easingで自然な動きにする
- lerpで滑らかに補間する
- scrollと組み合わせる
👉 このあたりを組み合わせると一気にUIが良くなります
11.まとめ
requestAnimationFrameは、
👉 ブラウザと同期して動くための仕組みです
単なるアニメーションではなく、
- パフォーマンス最適化
- 滑らかさの基盤
になります。
まずはシンプルなループから試して、
次にeasingやlerpと組み合わせてみてください。
🔗 関連記事
👉 easingについて知りたい方は
「easingとは？」で解説しています
👉 lerp（補間）の解説は
「lerpでなめらかに追従するUIを作る方法」で解説しています
👉 スクロール連動の基本は
「Scroll Trigger Animation」で解説しています
🔎 このラボの全体像はこちら
→ UI Architecture Roadmap
コメントを残す