RequestAnimationFrame - DOMHighResTimeStampパラメータを使用する必要がありますか？

Question

私はrequestAnimationFrameの使い方を研究しようとしてきましたが、私は非常に混乱しました。あなたがrequestAnimationFrame(step)で呼び出す「ステップ」と呼ばれるアニメーション機能を持っている場合

Mozillaによると、stepは、ミリ秒数、DOMHighResTimeStamp引数で引数を受け入れます。

しかし、私はrequestAnimationFrameの使い方についてオンラインで見たすべての例でこの引数を使用していません。いくつかの例では、step関数が1秒間に60回実行されると仮定できるので、timeの概念をまったく使用しないと主張する例もあります。他の人は、new Date();を使用して、引数とは別の「ミリ秒数」を取得します。これらの例を変更して、代わりに引数を使用するのは簡単です。

機能が1秒間に60回実行されるとはいいですか？私には賢明に見えません。 Mozillaはと述べています。「コールバックの回数は通常1秒間に60回ですが、W3Cの勧告「」のように、ほとんどのWebブラウザでは一般的に表示リフレッシュレートと一致します。なぜ人々は引数を使用するのではなく、自分のnew Date()ミリ秒を取得する方法を使用している理由はありますか？

Answer 1

これまでにいくつかの他の回答やコメントがありましたが、何らかの理由で削除されました。私は適切にタイムスタンプを使用する方法を考え出すことになったと答えhere

私は上の答えをコピーします投稿：

---

私はあなたのための答えを見つけたと思いますが。それthis library

まずに基づいています、私はちょうどその時、私はサンプルコードの改変形態を使用することになり、そのサイトから

function inOutQuad(n){ 
    n *= 2; 
    if (n < 1) return 0.5 * n * n; 
    return - 0.5 * (--n * (n - 2) - 1); 
}; 

を機能をつかむだろう、この

function startAnimation(domEl){ 
    var stop = false; 

    // animating x (margin-left) from 20 to 300, for example 
    var startx = 20; 
    var destx = 300; 
    var duration = 1000; 
    var start = null; 
    var end = null; 

    function startAnim(timeStamp) { 
     start = timeStamp; 
     end = start + duration; 
     draw(timeStamp); 
    } 

    function draw(now) { 
     if (stop) return; 
     if (now - start >= duration) stop = true; 
     var p = (now - start)/duration; 
     val = inOutQuad(p); 
     var x = startx + (destx - startx) * val; 
     $(domEl).css('margin-left', `${x}px`); 
     requestAnimationFrame(draw); 
    } 

    requestAnimationFrame(startAnim); 
} 

のようなもの、私は「停止」の計算方法を変更する可能性があります。destxなどで終了するように書き込むかもしれませんが、それは基本形式です。

this jsfiddle

私は実際にこれを誇りに思っています。私はこれをしばらく理解したいと思っています。うれしい私には理由があった。