requestAnimationFrame

gpt-4.icon

requestAnimationFrameは、ブラウザが描画を最適化するためのAPIです。

次の再描画が実行される前にアニメーション関数が呼び出されることを要求する

基本的な使い方

requestAnimationFrameを利用するためには、アニメーションの各フレームを描画する関数を定義し、その関数をrequestAnimationFrameに渡します。

例:

code:javascript

function animate() {

// アニメーションの更新処理

// 次のフレームをリクエスト

requestAnimationFrame(animate);

}

// 最初のフレームをリクエスト

requestAnimationFrame(animate);

利点

アニメーションのパフォーマンスが向上

requestAnimationFrameは、ブラウザが最適なタイミングで描画を行うため、setTimeoutやsetIntervalよりも効率的です。

バッテリー消費の削減

タブが非アクティブな場合、requestAnimationFrameは呼び出されないため、リソースの消費が抑えられます。

スムーズなアニメーション

リフレッシュレートに同期するため、画面のちらつきやカクつきを防ぎます。

注意点

無限ループに注意

間違った使い方をすると、不要なリソース消費やブラウザのフリーズを引き起こすことがあります。

対応ブラウザ

古いブラウザではサポートされていない場合があります。ポリフィルを使用することで対応可能です。