实现使用requestAnimationFrame有所稳定帧率？ [英] Achieve somewhat stable framerate with requestAnimationFrame?

问题描述

我玩与周围的 requestAnimationFrame ，但我得到任何其他浏览器Chrome以外的很生涩的动画。

I am playing around with the requestAnimationFrame but I get very jerky animations in any other browser than 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));
        }
    };
}

现在我只是画在画布上的元素一个矩形和移动它。它是在处理器上一个非常轻量级操作。这是运行平稳pretty在Chrome中，当我控制台日志delta值，它是围绕几乎一致的〜17。但是，如果我做同样的在Firefox或Safari我得到以下增量值：

Right now I am just drawing a single rectangle on a canvas element and moving it around. It is a very lightweight operation on the processor. This is running pretty smoothly in Chrome, and when I console log the delta value, it is almost consistant around ~17. However, if I do the same in Firefox or Safari I get the following delta values:

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

这看起来好像浏览器未与显示器同步的非常漂亮，在所有其他情况下比浏览器，人会用老的setTimeout方法，16ms的作为目标超时获得更流畅的动画效果。

It looks as if the browser is not syncing with the display very nicely, and in all other cases than Chrome, one would get smoother animations using the old setTimeout method with 16ms as the target timeout.

有谁知道，如果有可能在Chrome以外的其他浏览器中使用 requestAnimationFrame 获得更流畅的动画？有没有人比在Firefox上面贴了那些获得较稳定的增量值succeded？

Does anyone know, if it is possible to get smoother animations using requestAnimationFrame in browsers other than Chrome? Has anyone succeded in getting more stable delta values than the ones posted above in Firefox?

推荐答案

动画的流畅帧率下降的原因是由于您的浏览器与问候到画布的内存。我不知道性能在浏览器中的实际细节，但火狐几乎立刻有帧率下降和镀铬的下降后出现一段时间了。

The reason the smooth framerate of your animation decreases is because of the memory of your browser with regards to the canvas. I don't know the real details of the performance in browsers but firefox almost immediately has a framerate drop and in chrome the drop occurs some time later.

帧率下降的真正的问题是，因为canvas元素所占用的内存。每次画东西的操作保存到画布的路径在画布上。这条道路占用更多的内存每次在画布上画东西的时间。如果不清空画布的路径，你将有帧率下降。画布路径不能用清空画布context.clearRect（X，Y​​，W，H）被掏空; ，相反，你必须重新开始用帆布路径与（）的新路径context.beginPath; 例如：

The real problem of the framerate drop is because of the memory occupied by the canvas element. Each time you draw something to the canvas that operation is saved to the path of the canvas. This path occupies more memory each time you draw something on the canvas. If you don't empty the path of the canvas you will have framerate drops. The canvas path can't be emptied by clearing the canvas with context.clearRect(x, y, w, h);, instead you have to reset the canvas path by beginning a new path with context.beginPath();. For example:

// 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 
}

这篇关于实现使用requestAnimationFrame有所稳定帧率？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！