javascript - Firefox下canvas动画闪烁

Question

无论我做什么，我都无法在 Firefox 下获得流畅的 Canvas 动画。我什至设置了一个简单的测试代码，除了每 1/40 秒调用一次空绘图函数之外什么都不做，而且它仍然闪烁。

var t = 0;
function draw(time)
{
  console.log(Math.round(time - t));
  t = time;
}

setInterval(function(){ requestAnimationFrame(draw); }, 25);

Firefox 下的帧之间的延迟有时会跳至 150 毫秒以上，这是人眼很容易注意到的。当使用简单的 setInterval 调用 draw() 而没有 requestAnimationFrame 时，也会发生同样的情况。它在 Chrome 和 Opera 下完美运行。

我也尝试摆脱setInterval，结果是相同的:

var t = 0;
function draw(time)
{
  requestAnimationFrame(draw);
  console.log(Math.round(time - t));
  t = time;
}
draw();

这是一个已知问题吗？有什么办法可以解决这个问题吗？

Answer 1

事实证明，Firefox 下 requestAnimationFrame 的当前实现非常糟糕，并且在从计时器或网络事件(即使是那些以恒定间隔重复的事件)调用时无法提供流畅的动画。

这使得当通过 websocket 连接更新状态时很难重绘 Canvas 。我获得流畅动画的唯一方法是立即调用 requestAnimationFrame:

(function draw()
{
   requestAnimationFrame(draw);
   // do something
})();

使用此方法时，实现某种帧插值通常是个好主意，因为 draw() 调用不会与网络事件同步。