JavaScriptでアニメーションを作ろう！requestAnimationFrameの使い方完全ガイド

1. requestAnimationFrameとは何か？

1. requestAnimationFrameとは何か？

JavaScriptのrequestAnimationFrameは、アニメーションを作るためにブラウザに描画タイミングを通知する関数です。通常のsetTimeoutやsetIntervalよりも滑らかでCPUにも優しいアニメーションが作れます。

たとえば、毎秒60回の描画をブラウザにお願いして、ボールを動かすイメージです。ブラウザが描画のタイミングを管理してくれるので、カクカクしにくくなります。

2. 基本的な使い方

2. 基本的な使い方

まずは簡単なアニメーション例です。数字が増えるだけのシンプルな動きです。

let count = 0;

function animate() {
  count++;
  console.log("count:", count);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

このコードでは、animate関数が自分自身をrequestAnimationFrameで呼び出し続けることで、数字が1ずつ増え続けます。

3. HTMLの要素を動かす

3. HTMLの要素を動かす

次は実際に画面上のボックスを右に移動させる例です。

<div id="box" style="width:50px;height:50px;background:red;position:absolute;"></div>

<script>
let box = document.getElementById("box");
let pos = 0;

function moveBox() {
  pos += 2;
  box.style.left = pos + "px";
  if(pos < window.innerWidth - 50) {
    requestAnimationFrame(moveBox);
  }
}

requestAnimationFrame(moveBox);
</script>

ボックスの位置を少しずつ増やし、requestAnimationFrameで更新することで、滑らかに右に動きます。

4. アニメーションを止める方法

4. アニメーションを止める方法

requestAnimationFrameは自分自身を呼び続けるため、止めたい場合は条件を付けます。

let pos = 0;
let animationId;

function move() {
  pos += 2;
  console.log(pos);
  if(pos < 100) {
    animationId = requestAnimationFrame(move);
  }
}

// アニメーション開始
animationId = requestAnimationFrame(move);

// 途中で止めたいとき
// cancelAnimationFrame(animationId);

アニメーションを止める場合は、cancelAnimationFrameにIDを渡します。

5. 時間を使った滑らかなアニメーション

5. 時間を使った滑らかなアニメーション

フレーム数だけでなく、実際の経過時間を使うと速度が安定します。

let startTime;

function smoothMove(timestamp) {
  if(!startTime) startTime = timestamp;
  let progress = timestamp - startTime;
  console.log("進行時間(ms):", progress);
  if(progress < 2000) { // 2秒間だけ動かす
    requestAnimationFrame(smoothMove);
  }
}

requestAnimationFrame(smoothMove);

このようにtimestampを使うと、描画のフレームレートが変わっても速度が一定になります。

6. 複数の要素をアニメーションさせる

6. 複数の要素をアニメーションさせる

ボックスを複数動かす例です。

<div id="box1" style="width:30px;height:30px;background:blue;position:absolute;top:0;"></div>
<div id="box2" style="width:30px;height:30px;background:green;position:absolute;top:50px;"></div>

<script>
let box1 = document.getElementById("box1");
let box2 = document.getElementById("box2");
let pos1 = 0;
let pos2 = 0;

function moveBoxes() {
  pos1 += 3;
  pos2 += 1.5;
  box1.style.left = pos1 + "px";
  box2.style.left = pos2 + "px";
  if(pos1 < window.innerWidth - 30 || pos2 < window.innerWidth - 30) {
    requestAnimationFrame(moveBoxes);
  }
}

requestAnimationFrame(moveBoxes);
</script>

複数の要素を同時に動かしても、requestAnimationFrameなら滑らかに描画されます。

7. まとめのポイント

7. まとめのポイント

JavaScriptで滑らかなアニメーションを作るには、requestAnimationFrameを使うのが基本です。要点は以下の通りです。

• ブラウザに最適化された描画タイミングで動かせる
• 自分自身を呼ぶ関数を作ることでループアニメーションが可能
• cancelAnimationFrameで止められる
• タイムスタンプを使うと速度が安定する
• 複数の要素も同時に滑らかに動かせる

これで、簡単なゲームやアニメーションの土台を作ることができます。少しずつ実践して、ボールやキャラクターを自由に動かせるようになりましょう。

まとめ

まとめ

今回の記事では、JavaScriptのrequestAnimationFrameを活用して滑らかなアニメーションを作成する方法について詳しく解説しました。まず、requestAnimationFrameはブラウザに描画タイミングを通知し、CPU負荷を抑えつつ効率的にアニメーションを行える点が最大の特徴です。従来のsetTimeoutやsetIntervalを使った方法と比較して、描画タイミングがブラウザに最適化されるため、カクカクせず滑らかに動かすことができます。また、自分自身を繰り返し呼び出す関数を作ることで、ループアニメーションを簡単に構築できることも学びました。

アニメーションの制御方法として、条件分岐を使ってcancelAnimationFrameで停止させることができ、これにより複雑な動きや途中停止が必要な場面でも柔軟に対応できます。さらに、フレーム数だけでなく、timestampを利用した時間計算を組み込むことで、描画フレームレートに関係なく速度を一定に保つことが可能です。複数の要素を同時に動かす場合でも、requestAnimationFrameは一括で管理されるため、複数のボックスやキャラクターを滑らかに動かすことができます。

実際のコーディング例では、まず数字のカウントアップ、次に単一のボックス移動、さらに複数要素のアニメーションまで段階的に紹介しました。これにより、初めてJavaScriptでアニメーションを作る人でも、基礎から応用までの流れを理解しやすくなっています。ボックスの動きや速度制御、アニメーションの開始・停止方法を理解することで、ゲーム制作やインタラクティブなWebページ制作に応用できる土台が完成します。

重要なポイントは以下の通りです。

• ブラウザに最適化された描画タイミングでアニメーションを実行できる
• 自分自身を呼ぶ関数でループアニメーションが可能
• cancelAnimationFrameで任意のタイミングで停止可能
• timestampを利用すると速度が安定する
• 複数の要素も同時に滑らかに動かせる

これらを応用することで、ボールやキャラクターの動きだけでなく、スクロールアニメーションや背景のパララックス効果、ゲームの敵キャラクターの移動や演出など、多様な表現に活かせます。最初は単純な動きから始め、少しずつ複雑なアニメーションに挑戦することで、JavaScriptアニメーションの理解が深まります。

さらに、ブラウザの描画フレームに合わせたrequestAnimationFrameを使うことで、スマートフォンやタブレットでもカクつかずスムーズに動作する点は、実際の制作現場で非常に重要です。CPU負荷が低いため、長時間のアニメーションや連続アニメーションにも向いています。

サンプルコードを通して、アニメーションの基本構造やループ制御、停止方法、タイムスタンプを用いた速度調整、複数要素の同時制御を学ぶことで、JavaScriptによる動的なWebコンテンツ制作の自信につながります。これらをマスターすると、ユーザーに視覚的に豊かな体験を提供するインタラクティブなページやミニゲームを自作できるようになります。