requestAnimationFrame によるアニメーション
滑らかな Canvas アニメーションを作成します。
「requestAnimationFrame によるアニメーション」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
なぜ requestAnimationFrame を使うのか
requestAnimationFrame(callback) は、次の画面の再描画前に描画関数を実行するようスケジュールします。通常は1秒間に60回実行されます。setInterval とは異なり、バックグラウンドのタブでは停止するため、CPUとバッテリーを節約できます。
function frame() {
// draw one frame
requestAnimationFrame(frame);
}
requestAnimationFrame(frame);基本ループ
アニメーションループでは、キャンバスを消去し、状態を更新して描画した後、自身を再びスケジュールします。
let x = 0;
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 30, 30);
x += 2;
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);各フレームでの消去
clearRect を使わないと前のフレームが描画されたままになり、軌跡が残ります。きれいに再描画するには、各フレームの先頭でバッファ全体を消去します。
ctx.clearRect(0, 0, canvas.width, canvas.height);タイムスタンプ引数
コールバックは高精度のタイムスタンプ（ミリ秒）を受け取ります。これを使ってフレーム間の経過時間を計算します。
let last = 0;
function loop(now) {
const dt = now - last;
last = now;
// dt = ms since previous frame
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);フレームレートに依存しない動き
速度にデルタ時間を掛けると、フレームレートにかかわらず移動速度を一定にできます。
let x = 0;
const speed = 0.1; // px per ms
function loop(now) {
const dt = now - (loop.last || now);
loop.last = now;
x += speed * dt;
requestAnimationFrame(loop);
}ボールを跳ね返す
オブジェクトが端にぶつかったときに速度を反転させると、跳ね返る動きになります。
let x = 50, vx = 3;
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
x += vx;
if (x < 0 || x > canvas.width) vx = -vx;
ctx.beginPath();
ctx.arc(x, 75, 15, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(loop);
}
loop();ループを停止する
requestAnimationFrameはIDを返します。そのIDをcancelAnimationFrameに渡すと、アニメーションを停止できます。
let id;
function loop() {
id = requestAnimationFrame(loop);
}
id = requestAnimationFrame(loop);
// later:
cancelAnimationFrame(id);一時停止と再開
実行中かどうかを示すフラグを管理します。再開するときは新しいフレームをリクエストし、一時停止するときはリクエストを止めるだけです（または保留中のリクエストをキャンセルします）。
let running = true;
function loop() {
if (!running) return;
// draw...
requestAnimationFrame(loop);
}
function pause() { running = false; }
function resume() { running = true; requestAnimationFrame(loop); }複数のオブジェクトをアニメーションさせる
オブジェクトを配列に格納し、ループ内ですべてのオブジェクトを更新します。
const balls = [{ x: 10, vx: 2 }, { x: 80, vx: -3 }];
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (const b of balls) {
b.x += b.vx;
ctx.fillRect(b.x, 60, 20, 20);
}
requestAnimationFrame(loop);
}
loop();滑らかな動きのためのイージング
イージングを使って目標値に向けて補間すると、自然に減速する動きになります。
let x = 0;
const target = 200;
function loop() {
x += (target - x) * 0.1; // ease out
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(x, 50, 30, 30);
if (Math.abs(target - x) > 0.5) requestAnimationFrame(loop);
}
loop();パフォーマンスのヒント
ループ内でのオブジェクトの割り当てを避け、描画呼び出しをまとめ、可能な場合は変更された部分だけを再描画します。60fpsで約16msの予算内に収めるため、フレームごとの処理を小さく保ちます。
クイックチェック
アニメーションに関する知識を確認しましょう。
まとめ：アニメーション
requestAnimationFrameを使ったアニメーションループを構築し、clearRectで各フレームを消去し、タイムスタンプを使ってフレームレートに依存しない動きを実現しました。また、跳ね返るボールや複数のオブジェクトをアニメーションさせ、イージングを適用し、cancelAnimationFrameで停止・一時停止する方法を学びました。
よくある質問
「requestAnimationFrame によるアニメーション」レッスンは無料ですか？
はい。「requestAnimationFrame によるアニメーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「requestAnimationFrame によるアニメーション」で何を学びますか？
滑らかな Canvas アニメーションを作成します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「requestAnimationFrame によるアニメーション」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Canvas コンテキストを設定する
- 図形とパスを描画する
- 画像とテキストを扱う
- requestAnimationFrame によるアニメーション