requestAnimationFrame
>#WIP
requestAnimationFrameは、ブラウザが描画を最適化するためのAPIです。
次の再描画が実行される前にアニメーション関数が呼び出されることを要求する
基本的な使い方
requestAnimationFrameを利用するためには、アニメーションの各フレームを描画する関数を定義し、その関数をrequestAnimationFrameに渡します。
例:
javascript function animate() {
// アニメーションの更新処理
// 次のフレームをリクエスト
requestAnimationFrame(animate);
}
// 最初のフレームをリクエスト
requestAnimationFrame(animate);利点
アニメーションのパフォーマンスが向上
バッテリー消費の削減
タブが非アクティブな場合、requestAnimationFrameは呼び出されないため、リソースの消費が抑えられます。
スムーズなアニメーション
リフレッシュレートに同期するため、画面のちらつきやカクつきを防ぎます。
注意点
無限ループに注意
間違った使い方をすると、不要なリソース消費やブラウザのフリーズを引き起こすことがあります。
対応ブラウザ
古いブラウザではサポートされていない場合があります。ポリフィルを使用することで対応可能です。