Canvas动画在Firefox下闪烁 [英] Canvas animation flickering under Firefox

问题描述

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

No matter what I do, I can't get a fluent canvas animation under Firefox. I even set up a simple test code which does absolutely nothing except calling empty draw function every 1/40 s and it's still flickering.

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

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

Firefox下的帧之间的延迟有时会跳到150 ms以上，这很容易被人眼所察觉。当使用简单的 setInterval 调用 draw（），而不使用 requestAnimationFrame 。

Delay between frames under Firefox sometimes jumps to over 150 ms which is easily noticable by human eye. Same thing happens when using simple setInterval to call draw(), without the requestAnimationFrame. It runs perfectly under Chrome and Opera.

我也试过去掉 setInterval ，结果是一样的：

I've also tried getting rid of setInterval, results are the same:

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

这是已知问题吗？

推荐答案

找出 requestAnimationFrame 在Firefox是可怕的，无法提供流畅的动画从定时器或网络事件（甚至那些以恒定的间隔重复）调用。

Turns out the current implementation of requestAnimationFrame under Firefox is terrible and fails to provide smooth animation when called from timers or network events (even those which are repeated at constant interval).

当通过websocket连接更新状态时，很难重绘画布。我可以获得平滑动画的唯一方法是立即调用 requestAnimationFrame ：

This makes it hard to redraw canvas when state is updated over websocket connection. The only way I could get smooth animation was calling requestAnimationFrame immediately:

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

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

When using this method, it's quite often a good idea to implement some kind of frame interpolation, as draw() calls won't be synchronized with network events.

这篇关于Canvas动画在Firefox下闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！