用requestAnimationFrame实现一些稳定的帧率

Achieve somewhat stable framerate with requestAnimationFrame?

本文关键字：帧率 requestAnimationFrame 实现      更新时间：2023-09-26

我正在玩的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中执行相同的操作，我将得到以下增量值:

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中发布的更稳定的增量值?

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

真正的问题是由于canvas元素占用了内存。每次在画布上绘制内容时，该操作都会保存到画布的路径中。每次在画布上绘制内容时，此路径都会占用更多内存。如果你不清空画布的路径，你就会有帧率下降。画布路径不能通过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 
}

当delta <阈值，例如:>

if (delta > 5) this.update();
相关文章：