1

WebGL でアニメーション化するために JavaScript でタイマーを作成しようとしています。Date クラスを使用して経過時間を取得するコードです。

var lastTime = Date.now();
var elapsed = 0;
var timeNow = Date.now();
function animate() {
    timeNow = Date.now();
    if(timeNow > lastTime) {
        elapsed = timeNow - lastTime;
        console.log(elapsed);
    }

    lastTime = timeNow;
}

Animate は window.requestAnimationFrame() コールバックから呼び出されます。しかし、それは 16 から 17 の間の値を生成しているようです。20 を超えることはありません。何が起こっているのでしょうか?

編集：実際、それは私のダープでした。Elapsed は = ではなく += である必要がありました。なぜ16から17の間だったのかを説明してくれたAbstract Algorithmに感謝します。:)

4

1 に答える 1

1

1 秒あたり 60 回呼び出しanimateているのは、おそらくそれが設定されているためrequestAnimationFrameです (既定で設定されています)。1000 ミリ秒 / 60 フレーム = 16.xx ミリ秒。したがって、アニメーションは ~16ms ごとに呼び出され、それが得られます。

if ( !window.requestAnimationFrame ) {

window.requestAnimationFrame = ( function() {

    return window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

        window.setTimeout( callback, 1000 / 60 );   // so call it every ~16ms

    };

} )();

}

于 2013-08-25T13:40:14.543 に答える