Clever Geek Handbook

requestAnimationFrameを使用した高度なアニメーション

アニメーションを実行するコードを記述したことがない場合は、これ以上読むことはできません。



requestAnimationFrameとは何ですか？



すべてのアニメーション機能で、繰り返しタイマーを使用して、数ミリ秒ごとに変更を適用します。 良いニュースは次のとおりです。ブラウザメーカーは、「いくつかのポイントを最適化できる可能性があるため、このAPIを提供しない理由」を決定しました。 したがって、これは、DOMスタイルの変更、キャンバスまたはWebGLの再描画に基づいてアニメーションを作成するためのメインAPIです



なぜこれを使用する必要がありますか？



ブラウザーは、同時に実行されるアニメーションを最適化して、リフローと再ペイントの回数を1回に減らすことができます。これにより、アニメーションの精度が向上します。 たとえば、JavaScriptのアニメーションは、CSS遷移またはSVG SMILと同期します。 さらに、 アニメーションが非表示のタブで実行されると、ブラウザーは再描画を続行せず 、CPU、GPU、メモリの使用量が少なくなり、その結果、モバイルデバイスのバッテリー消費が削減されます。



使用例 



//    -    window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); }; })(); // : (function animloop(){ render(); requestAnimFrame(animloop, element); })();


注： 仕様はまだ開発中であるため、requestAnimFrameを使用します。したがって、事前にグローバルrequestAnimationFrameを宣言したくない（ polyfillを適用します）



ここで実際に使用してください： jsfiddle.net/paul/XQpzU



requestAnimationFrameのAPI 



 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date }, /*   */ elem);


現在の時刻はコールバックに転送されますが、とにかく必要です。 2番目のパラメーターは、現在のアニメーションに関連付けられている要素を渡します（最適化のため）。 キャンバスおよびWebGLの場合、これは<canvas>要素になります。 他のアニメーションについては、パフォーマンスを改善するために何も転送することも定義することもできます。



すでに使用できますか？



現在、Webkit（ Nightly SafariとChrome Dev Channel ）とMozilla（FF4）はわずかに異なります。 Mozillaには、 アニメーションのフレーム数（約30）を制限するバグがあります。 実際には、「1000 /（16 + N）fpsに制限されています。Nは、アニメーション機能の実行に必要なミリ秒数です。 関数が1秒かかる場合、フレーム数は1秒あたり1未満になります。 アニメーション機能に1ミリ秒かかる場合、フレーム数は約60になります。これは、FF4以降の次のFFリリースで修正されます。 また、Chrome 10には時間パラメーター（m11で追加）がありません。FFはelem引数を無視します。



レビューを書きます！



アニメーションを使用する場合、WebKitおよびGeckoの開発者は、フィードバックや提案を喜んでお聞きします。 requestAnimationFrameのドラフト仕様を確認してください。 setIntervalに置き換える価値はありますか？ このAPIには、複数のオブジェクトを同時にアニメーション化するときに問題がありますか？ elemの最適化は機能しますか？ このAPIは、アニメーションのすべてのニーズをカバーしていますか？



その他の情報源

  1. ドラフト仕様（heycamとjamesrが作成）
  2. Chromiumデザインドキュメント
  3. 基本的な例
  4. いくつかの可能な設定で、より包括的な例
  5. mozRequestAnimationFrameのMDCドキュメント
  6. アニメーションタイマーを使用するライブラリyui anim loop 、 three.js 、 limejs 、 jQuery実装のチケット
  7. タブを切り替えたときのLouis-RémiBabéによるデモでは、プロセッサの負荷を確認します
  8. NokarmaのrequestAnimationFrameのカバレッジ
  9. MozillaのrAFに関するRobert O'Callhanの初期投稿


More articles:


All Articles