9

我正在玩，requestAnimationFrame但我在 Chrome 以外的任何其他浏览器中都得到了非常生涩的动画。

我创建一个这样的对象：

var object = function() {

    var lastrender = (new Date()).getTime();
    var delta = 0;

    return {

        update: function() {
             //do updates using delta value in calculations.
        },

        loop: function() {
            var looptimestamp = (new Date()).getTime();
            delta = looptimestamp - lastrender;
            lastrender = looptimestamp;

            this.update();

            window.requestAnimationFrame(this.loop.bind(this));
        }
    };
}

现在我只是在画布元素上绘制一个矩形并移动它。这是处理器上非常轻量级的操作。这在 Chrome 中运行得非常顺利，当我控制台记录 delta 值时，它几乎在 ~17 左右一致。但是，如果我在 Firefox 或 Safari 中执行相同操作，我会得到以下 delta 值：

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on

看起来浏览器似乎没有很好地与显示器同步，并且在除 Chrome 之外的所有其他情况下，使用旧的 setTimeout 方法（将 16 毫秒作为目标超时）可以获得更流畅的动画。

有谁知道，是否可以requestAnimationFrame在 Chrome 以外的浏览器中使用更流畅的动画？有没有人成功获得比 Firefox 上面发布的更稳定的 delta 值？

4

2 回答 2

4

动画平滑帧率降低的原因是浏览器对画布的内存。我不知道浏览器性能的真实细节，但 Firefox 几乎立即出现帧率下降，而在 chrome 中下降发生在一段时间后。

帧率下降的真正问题是由于画布元素占用的内存。每次您在画布上绘制某些内容时，该操作都会保存到画布的路径中。每次在画布上绘制内容时，此路径会占用更多内存。如果您不清空画布的路径，则会出现帧率下降。无法通过清除画布来清空画布路径context.clearRect(x, y, w, h);，而是必须通过使用 开始新路径来重置画布路径context.beginPath();。例如：

// function that draws you content or animation
function draw(){
    // start a new path/empty canvas path
    canvas.beginPath(); 

    // actual drawing of content or animation here 
}
于 2014-05-25T18:37:36.013 回答
0

如果您在 delta < 阈值时跳过更新，您可能会获得更流畅的动画，例如：

if (delta > 5) this.update();
于 2013-12-11T13:25:44.560 回答