RX100で撮り歩くブログ

RX100で撮った写真を中心によりよい生活を目指すブログ

requestAnimationFrameについて

requestAnimationFrameは再描画が頻繁に行われる処理に使えるメソッド。three.jsを勉強しているときにオブジェクトを回転させるときとかに使われているので調べてみました。

developer.mozilla.org

比較されるものとしてsetInteval、setTimeoutがありますが、ブラウザで準備ができていなくても必ず実行、タブが非アクティブでも実行され、メモリリークの原因になるそうです。

一方でrequestAnimationFrameはタブが非アクティブ時のときは実行されなかったり、再描画が行われる前に次のアニメーションをする関数を呼び出すといった特徴があります。

また、ブラウザの描画更新単位と同じ単位で呼び出されるため、ブラウザごとの差異があることに注意。

よく見るサンプルがこんな感じ。

const loop = () => {
  requestAnimationFrame(loop)

  mesh.rotation.x += 0.01
  mesh.rotation.y += 0.01

  renderer.render(scene, camera);
}

これでも動きますが、60fpsの環境では1秒間に0.6まで動く一方、30fpsの環境では1秒間に0.3とブラウザによって動きが違ってくる可能性があります。

そこで時間ベースのアニメーションが必要になります。

const loop = () => {
  requestAnimationFrame(loop)

  const sec = performance.now() / 1000

  mesh.rotation.x = sec * (Math.PI / 4)
  mesh.rotation.y = sec * (Math.PI / 4)

  renderer.render(scene, camera)
}

performance.now()はページ表示時からの経過時間がミリ秒で返ってきます。

参考サイト

qiita.com

liginc.co.jp