Canvas Firefox 下动画闪烁

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

原来 requestAnimationFrame 在 Firefox 下的当前实现很糟糕，并且在从计时器或网络事件（即使是那些以固定间隔重复的事件）调用时无法提供流畅的动画。

这使得在通过 websocket 连接更新状态时难以重绘 canvas。获得流畅动画的唯一方法是立即调用 requestAnimationFrame：

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

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

Canvas animation flickering under Firefox