RequestAnimationFrameによる正確なタイミング

Question

これまでのところ、このテーマに関する多くのドキュメントは見つかりませんでした。私が得る一般的な感じは、ブラウザ用のアニメーションを実装するときに、RequestAnimationFrameを標準のJavaScriptタイマーよりも使用するほうがよいことです。私の理解では、タイマーは信頼できず、その解像度はブラウザーによって異なります。

私はこの主旨で見てきた：https://gist.github.com/1114293#file_anim_loop_x.js

しかし、それはあなたがアニメーションが一定時間にわたり蒸散ことを確認することができますどのように私にははっきりしません。たとえば、2秒以内に何かを左から右にアニメートすることができます。これはRequestAnimationFrameを使用することができますか、それとも目的を破っていますか？

Answer 1

まあまあですが、私はずっと前と同様の問題を抱えており、非常に効果的に動作するperformance.now（）とrAFを組み合わせたアプローチを思いつきました。

約12の小数点以下のタイマーが正確にするために、今できるイム：私は、時間ベースのアニメーションを実装し

window.performance = window.performance || {}; 
    window.performance.now = (function() { 
     return performance.now  || 
      window.performance.mozNow || 
      window.performance.msNow  || 
      window.performance.oNow  || 
      window.performance.webkitNow || 
       function() { 
        return new Date().getTime(); 
       }; 
     })(); 

http://jsfiddle.net/CGWGreen/9pg9L/

Answer 2

RequestAnimationFrameは次の点で優れています。最も効果的なときに描画できます。私。 RequestAnimationFrameは、単なるタイマーよりも優れたfpsを得ることができますが、まっすぐな正確なタイミングは信頼性が低い場合があります。現在の時間を取得し、前のフレームの値と比較し、最後のフレームから経過した時間量に応じてアニメーションを計算する必要があります。

Answer 3

。各rAF反復で、以前の反復に対する時間経過を測定することができます。このデルタ時間と「距離」をピクセル単位で知ることで、2秒間に必要な速度を計算できます。

この記事のMozilla Hacksでは、一定速度（ピクセル/秒）でアニメーションを行うときにさまざまな考慮事項があります。

animLoop(function(deltaT) { 
    elem.style.left = (left += 10 * deltaT/16) + "px"; 
    if (left > 400) { 
    return false; 
    } 
});