在Firefox下闪烁的画布动画

Question

无论我做什么，我都无法在Firefox下获得流畅的画布动画。我甚至设置了一个简单的测试代码，除了每隔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连接更新状态时很难重绘画布。我能够获得平滑动画的唯一方法是立即调用requestAnimationFrame：

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

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