且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Canvas动画在Firefox下闪烁

更新时间:2023-11-24 08:31:46

找出 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.