HTML5 の探索: requestAnimationFrame を使用した Web アニメーションの最適化

ブラウザ アニメーション プログラムでは、通常、タイマーを使用してターゲット オブジェクトを数ミリ秒ごとに循環させ、ターゲット オブジェクトを動かします。さて、良いニュースは、ブラウザ開発者が「ユーザー向けにアニメーションを最適化できるように、ブラウザにそのような API を提供してはどうだろうか」と決断したことです。したがって、このrequestAnimationFrame()関数は、DOM やキャンバス アニメーション、WebGL のスタイル変更に使用できるアニメーション効果用の API です。

ブラウザーは、並列アニメーション アクションを最適化し、アクション シーケンスをより合理的に再配置し、1 回のレンダリング サイクルで組み合わせることができるアクションを完了することで、よりスムーズなアニメーション効果を表示できます。たとえば、requestAnimationFrame() を通じて、JS アニメーションを CSS アニメーション/変換または SVG SMIL アニメーションと同時に実行できます。さらに、ブラウザーのタブでアニメーションを実行すると、タブが表示されなくなるとブラウザーはアニメーションを一時停止します。これにより、CPU とメモリへの負荷が軽減され、バッテリー電力が節約されます。

// setTimeout のシムレイヤー fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };} )();// setInterval(render, 16) の代わりに使用法:// ....(function animloop(){ requestAnimFrame(animloop); render();})();// setTimeout フォールバックで 60fps に近くなるように、rAF を render() の *前* に配置します。

requestAnimationFrame のより信頼性の高いカプセル化

Opera ブラウザー技術者の Erik Möller は、さまざまなブラウザーとの互換性を高めるためにこの関数をカプセル化しました。この記事を読むとわかりますが、基本的に彼のコードは、60fps に最もよく適合するために 4ms または 16ms のどちらの遅延を使用するかを決定しています。以下にこのコードを示します。使用できますが、このコードは標準関数を使用しており、さまざまなブラウザ エンジンと互換性のあるプレフィックスを追加していることに注意してください。

 (function() { var lastTime = 0; varベンダー = ['webkit', 'moz']; for(var x = 0; x <venders.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'] } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }、timeToCall); lastTime = currTime + timeToCall; if (!window.cancelAnimationFrame) {clearTimeout(id);

requestAnimationFrame を使用した効果を見てみましょう

 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // UNIX 時間});

コールバック関数のパラメータは時間内に渡すことができます。

さまざまなブラウザの requestAnimationFrame のサポート

Google Chrome、Firefox、および IE10 以降はすべてこの関数を実装しています。ブラウザが非常に古い場合でも、上記の requestAnimationFrame カプセル化により、IE8/9 ではこのメソッドをエラーなく実行できます。