javascript - requestAnimationFrame 固定持续时间

Question

我试图了解有关 requestAnimationFrame 的一件事。

在下面的示例代码中，我运行了 60 次，这应该与您通常获得的典型每秒 60 帧相匹配，因此它应该持续 1 秒。然而我故意通过调用一个浪费时间的函数来拖它。

显然，这需要更长的时间(在我的机器上大约需要 5 秒)。

问题是，我该如何设置动画，使其持续固定的持续时间(例如 1 秒)——大概这应该在过程中跳过几帧？

尽管示例听起来很具体，但它具有更广泛的背景。我想创建动画，例如淡入淡出或滑动，其具有设定的持续时间而不是设定的帧数，因为帧速率不完全可预测。这将与 CSS3 动画的行为相匹配。

谢谢

var i=0;
var start=new Date();
var end;

var counter=document.getElementById('counter');
var time=document.getElementById('time');

doit();

function doit() {
  if(i>=60) {
    end=new Date();
    time.innerHTML=end.getTime() - start.getTime();
    return;
  }
  wasteTime();
  counter.innerHTML+=i+' ';
  i++;
  requestAnimationFrame(doit)
}

function wasteTime() {
  for(var i=0;i<100000000;i++);
}

<p id="counter"></p>
<p id="time"></p>

Answer 1

setInterval 不是正确的解决方案。

您需要采取稍微不同的方法，因为您的动画需要了解动画的进度以及它们开始的时间。当下一个动画帧从浏览器传来时，您可以通过动画的移动速度乘以自上一帧以来的时间来更新动画的位置。正如您所说，如果您进行长时间处理，则无法保证 60fps。

在您的示例中，您需要将 i 增加一个适合自上一帧以来耗时量的数字:

var i=0;
var start=new Date();
var last=new Date();
var end;

var counter=document.getElementById('counter');
var time=document.getElementById('time');

doit();

function doit() {
  if(i>=60) {
    end=new Date();
    time.innerHTML=end.getTime() - start.getTime();
    return;
  }
  
  //Rather than just incrementing i by 1, here we
  //look at the difference since the last frame
  //and increment i by an appropriate amount
  var diff = new Date() - last;

  counter.innerHTML+=i+' ';
  i += diff/60;

  requestAnimationFrame(doit)
  last = new Date();
  wasteTime();
}

function wasteTime() {
  for(var i=0;i<100000000;i++);
}

<p id="counter"></p>
<p id="time"></p>

注意:我不确定为什么运行时间仍然超过 1 秒，仍在寻找。这可能是它与浏览器交互以写出 HTML 的方式。