Firefox下画布动画闪烁答案

【问题标题】：Canvas animation flickering under FirefoxFirefox下画布动画闪烁
【发布时间】：2015-09-11 23:31:02
【问题描述】：

无论我做什么，我都无法在 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();

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

【问题讨论】：

Firefox 中的 console.log 可能会更贵。尝试记录每秒的帧数。
你的应用是在后台点击还是类似的？如果画布不可见，大多数浏览器会降低绘图频率。
btw：setIntervall 结合 requestAnimationFrame 有点奇怪。只需使用requestAnimationFrame，否则您将有两个同时计时器，我不知道浏览器对此有何反应。
1) 在画布上使用 fillText 来显示帧时间。 Console.log 非常慢。 2) 仅使用 requestAnimationFrame。
他没有同时使用这两种方法...关于日志记录的答案也无济于事。你应该看看css。例如，每次更改宽度或高度时，画布都会自动刷新，也许动画正在运行？也许有一些用于firefox的强制绘制css var？如果不是，那么硬件设置、显卡更新、firefox 设置、firefox 版本。任何事情都可能导致这种情况，也许有人在某处列出了您的 Firefox 版本的错误报告。还有哪些浏览器可以肯定工作？

【解决方案1】：

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

当通过 websocket 连接更新状态时，这使得重绘画布变得困难。我获得流畅动画的唯一方法是立即致电requestAnimationFrame：

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

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

【讨论】：