requestAnimationFrameによるアニメーション
アニメーションフレームのループで滑らかなCanvasアニメーションを作成します
「requestAnimationFrameによるアニメーション」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
requestAnimationFrameを使う理由
requestAnimationFrame（rAF）は、次のブラウザーの再描画前にコールバックを実行するようスケジュールし、アニメーションをディスプレイのリフレッシュレート（通常は60fps）に同期させます。setIntervalとは異なり、rAFはタブが非表示になると一時停止するため、CPUとバッテリーを節約できます。
基本的なアニメーションループ
rAFループでは、現在のフレームを描画するanimate関数を定義し、その後requestAnimationFrame(animate)を呼び出して次のフレームをスケジュールします。ブラウザーは各再描画の前にanimateを呼び出し、ディスプレイのフレームレートに合わせた連続アニメーションを作り出します。
function animate(timestamp) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw frame at current state
draw(timestamp);
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);timestampパラメーター
rAFはコールバックにDOMHighResTimeStamp（ページの読み込みからの経過時間をミリ秒で表した値）を渡します。これを使って、フレームレートに依存しない動きを計算できます: delta = timestamp - lastTimestamp。速度にdeltaを掛けると、フレームレートに関係なく1秒あたりの移動距離を一定にできます。
フレームレートに依存しない動き
前のフレームからの経過時間を計算し、それに応じて移動量を調整します。100px/sで動くオブジェクトは、1フレームあたり100 * (delta / 1000)ピクセル移動します。これにより、30fpsと144fpsのディスプレイで物理演算の結果を一定にできます。
アニメーションの停止
rAFはハンドルを返します。cancelAnimationFrame(handle)でキャンセルできます。ハンドルを変数に保存し、ループ内で実行中フラグを確認するか、コンポーネントのクリーンアップ時にキャンセルします。要素をDOMから削除するときは、必ずループをキャンセルしてください。
Canvasアニメーションのパターン
各フレームで次の処理を行います: (1) Canvas全体をclearRectする、(2) 状態変数（位置、角度、時間）を更新する、(3) 新しい位置にすべてのオブジェクトを描画する、(4) 次のフレームのrequestAnimationFrameを呼び出す。clearRectを省略してはいけません。古いフレームが軌跡として蓄積してしまいます。
CSSトランジションとrAFの比較
単純なプロパティベースのアニメーション（ホバー効果、モーダルのスライドイン）には、CSSトランジションとアニメーションを使用します。細かいフレーム単位の制御が必要な複雑でインタラクティブなアニメーション（ゲームループ、物理シミュレーション、Canvas描画）にはrAFを使用します。
Canvasでのダブルバッファリング
複雑なシーンでは、まずオフスクリーンCanvasに描画し、その後1回の操作でdrawImageを使って表示用Canvasに描画します。部分的に描画されたフレームを表示しないためちらつきを防止でき、表示用Canvasは各フレームでアトミックに更新されます。
目標FPSへのスロットリング
フレームレートを低く制限する場合（例: 30fps）は、描画前に前回の描画から十分な時間が経過したかを確認します。if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }。応答性を維持するため、rAFのスケジュールは常に行います。
アニメーションのデバッグ
Chrome DevToolsのPerformanceパネルでは、JSフレームチャートにrAFコールバックを記録できます。16msを超える長いコールバックを探してください。フレーム落ちの原因になります。Rendering → FPS MeterのFPSメーターを使うと、操作中のリアルタイムのフレームレートを確認できます。
Web Animations APIという選択肢
手動でタイミングを管理せず、より単純な宣言型アニメーションを実現するには、element.animate(keyframes, options)を使用します。WAAPIはタイミング関数、フィルモード、反復を処理し、フレーム計算をブラウザーに任せます。WAAPIでは表現できないカスタム描画ロジックにはrAFを使用します。
理解度チェック
requestAnimationFrameループで、アニメーションの速度にdelta timeを掛ける必要があるのはなぜですか？
まとめ
requestAnimationFrameはJavaScriptのアニメーションをディスプレイのリフレッシュレートに同期させ、非表示のタブでは一時停止します。timestampパラメーターを使うと、delta timeのスケーリングによってフレームレートに依存しない動きを実現できます。Canvasアニメーションの基本パターン（消去、更新、描画、スケジュール）と、クリーンアップのためのcancelAnimationFrameを組み合わせることで、滑らかで効率的なWebアニメーションの基盤ができます。
よくある質問
「requestAnimationFrameによるアニメーション」レッスンは無料ですか？
はい。「requestAnimationFrameによるアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「requestAnimationFrameによるアニメーション」で何を学びますか？
アニメーションフレームのループで滑らかなCanvasアニメーションを作成します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「requestAnimationFrameによるアニメーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Canvasと2Dコンテキストのセットアップ
- 長方形とパスを描画する
- Canvas上のテキストと画像
- requestAnimationFrameによるアニメーション