requestAnimationFrame计算运行时间

requestAnimationFrame computing elapsed time

本文关键字：运行时间 计算 requestAnimationFrame      更新时间：2023-09-26

下面是控制动画计时的JS/WebGL代码片段，其中requestAnimFrame是常用的垫片。在FireFox和Safari下运行良好。在Chrome下，elapsedTime在第2帧及以后的帧变为负值。显然（根据本文）webkitRequestAnimationFrame没有将currentTime参数传递给draw回调！？！计算运行时间的正确跨浏览器方法是什么！？这太疯狂了！

var animationStartTime;
function draw(currentTime) {
    requestAnimFrame(draw);
    if (currentTime === undefined) {
       currentTime = Date.now();
    }
    if (animationStartTime === undefined) {
       animationStartTime = currentTime;
    }
    var elapsedTime = (currentTime - animationStartTime)/1000;
    gl.clear(gl.COLOR_BUFFER_BIT);
    drawScene(elapsedTime);
}

实际的WebGL程序在这里。在FireFox和Safari下，你会看到一个动画循环——在Chrome下，你将看到动画永远继续（直到我修复它）。

如果我说得对，你想测量渲染函数所花费的时间吗？然后你应该简单地这样做：

function draw() {
  requestAnimFrame(draw);
  var start = Date.now();
  // perform your drawing
  var elapsed = Date.now() - start;
}

但如果你需要FPS（每秒帧数），那么类似的东西就可以了：

var FPS = 0;
var ticks = 0;
var lastFPS = 0;
function draw() {
  requestAnimFrame(draw);
  // perform your drawing
  var now = Date.now();
  if (now - lastFPS >= 1000) {
    lastFPS = now;
    FPS = ticks;
    ticks = 0;
  }
  ticks++;
}
相关文章：