アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima

[sugarte]

setTimeoutやsetIntevalはタブが非アクティブの状態でも動き続けるが、requestAnimationFrameは非アクティブの状態だとFPSを落とすようになっており、メモリの消費を抑えることができる。

[site159]

request animation frame

[hirorock]

fps

[Yhei]

タイムリー過ぎる記事だったわかりやすい

[minonet]

アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requ...