Question

获得＆＃34; window.requestAnimationFrame＆＃34;之间时差的最佳方法是什么？在javascript中回调？

我试过了：

// create the best .requestAnimationFrame callback for each browser
window.FPS = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {window.setTimeout(callback, 1000 / 60);};
})();

// start animation loop
var dt, stamp = (new Date()).getTime();
function loop() {
    window.FPS(loop);
    var now = (new Date()).getTime();
    var dt = now - stamp;
    stamp = now;
}
// has "dt" the best accuracy?

Answer 1

有“dt”最佳准确度吗？

没有。根据{{3}}，

回调方法传递一个参数the docs，它指示requestAnimationFrame排队的回调开始触发的当前时间

因此您应该使用它来获得高精度。

function loop(now) {
    var last = now || Date.now(); // fallback if no precise time is given
    window.FPS(function(now) {
        now = now || Date.now();
        var dt = now - last;
        if (dt != 0) // something might be wrong with our frames
             console.log(dt);
        loop(now);
    });
}
window.FPS(loop);

（DOMHighResTimeStamp）

Answer 2

大多数现代浏览器会自动将高精度时间戳作为参数发送到每个requestAnimation回调循环中：http://caniuse.com/#search=performance

因此，您只需从当前时间戳中减去最后一个时间戳，即可获得自上次运行循环以来经过的时间。

这是示例代码和演示：

var USDEUR;
$.ajax({
    type: "GET",
    url: "http://download.finance.yahoo.com/d/quotes.csv?s=USDEUR=X&f=l1",
    dataType: "text",
    success: function(data) {USDEUR = data}
 });

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var startingTime;
var lastTime;
var totalElapsedTime;
var elapsedSinceLastLoop;

var $total=$('#total');
var $loop=$('#loop');

requestAnimationFrame(loop);

function loop(currentTime){
  if(!startingTime){startingTime=currentTime;}
  if(!lastTime){lastTime=currentTime;}
  totalElapsedTime=(currentTime-startingTime);
  elapsedSinceLastLoop=(currentTime-lastTime);
  lastTime=currentTime;
  $total.text('Since start: '+totalElapsedTime+' ms');
  $loop.text('Since last loop: '+elapsedSinceLastLoop+' ms');
  requestAnimationFrame(loop);
}

对于不支持body{ background-color: ivory; } #canvas{border:1px solid red;}的几个浏览器，您必须在循环中使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <p id=total>T1</p> <p id=loop>T2</p> <canvas id="canvas" width=300 height=300></canvas>而不是Performance，因为这些浏览器不会自动将时间戳发送到循环。

Answer 3

我会为每个想要使用此模式的人写一个明确的结论

// CREATING AN FPS ENGINE

window.FPS = (function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {window.setTimeout(callback, 1000 / 60);};
})();

var FPS = {
    loop: function(canvas_object) { // OPTIONAL canvas_object, I think it increases performance | canvas_object = document.getElementById("canvas_id")
        var ticks = window.FPS(function(now){
            var dt = now - FPS.stamp || 0;
            FPS.stamp = now;
            FPS.update(dt, FPS.stamp, ticks);
            FPS.loop(canvas_object);
        }, canvas_object);

    },
    update: undefined,
    stamp: undefined
};

// USING THE FPS ENGINE

FPS.loop(the_canvas_object); // starts the engine
FPS.update = function(dt, stamp, ticks) {
    // The game/video loop, using accurate dt. Stamp is the time since engine started. Ticks is the number of the loop cycles
    console.log("dt: " + dt + ", Stamp: " + stamp + ", Ticks: " + ticks); // check output   
    // HAPPY GAME CREATING
    var fps= (1 / (dt / 1000)).toFixed(1);
};

Javascript：如何获得window.requestAnimationFrame之间的时差

3 个答案: