requestAnimationFrame()

リクエストアニメーションフレーム（非同期処理）

意味次のフレーム描画前に関数を実行

requestAnimationFrame()とは？

requestAnimationFrame()は、次の画面描画の前に特定の関数を実行するためのメソッドです。主にアニメーションの実装に使用されます。

requestAnimationFrame()の具体的な使い方

滑らかな四角形のアニメーション例

<button onclick='startAnimation()'>アニメーション開始</button>
<div id='animationContainer' style='width: 300px; height: 150px; border: 1px solid black;'>
  <div id='box' style='width: 50px; height: 50px; background-color: red; position: relative;'></div>
</div>
<script>
function startAnimation() {
  const box = document.getElementById('box');
  let start;

  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = timestamp - start;
    box.style.left = Math.min(progress / 10, 250) + 'px';
    if (progress < 2500) {
      requestAnimationFrame(step);
    } else {
      alert('アニメーション完了');
    }
  }

  requestAnimationFrame(step);
}
</script>

このコードは、requestAnimationFrame()を使用して赤い四角形を滑らかに右に移動させるアニメーションを作成します。アニメーションは2.5秒間続き、完了時にアラートを表示します。これにより、requestAnimationFrame()がどのように滑らかなアニメーションを実現するかを視覚的に確認できます。

requestAnimationFrame()に関するよくある質問

Q. requestAnimationFrame()の利点は？

A. requestAnimationFrame()は、ブラウザの描画タイミングに合わせて実行されるため、滑らかなアニメーションが可能です。また、非表示タブでは実行を停止するため、リソースを節約できます。

Q. setInterval()との違いは？

A. setInterval()は固定間隔で実行されますが、requestAnimationFrame()はブラウザの描画タイミングに合わせて実行されます。そのため、requestAnimationFrame()の方がアニメーションに適しています。

Q. キャンセル方法は？

A. cancelAnimationFrame()を使用してキャンセルできます。requestAnimationFrame()が返すIDを引数として渡します。

requestAnimationFrame()が学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのrequestAnimationFrame()やPromise.any()、clearTimeout()、finally()、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。