使用requestAnimationFrame控制fps？

Question

这似乎requestAnimationFrame是现在制作动画的事实上的方式。在大多数情况下，它对我来说效果很好，但是现在我正在尝试做一些画布动画，我想知道：有没有办法确保它以某个fps运行？我知道rAF的目的是为了一贯平滑的动画，我可能冒着使我的动画不稳定的风险，但是现在看起来它的速度几乎是任意的，并且我想知道是否有办法打击不知何故。

我使用setInterval但我想要rAF提供的优化（特别是当选项卡处于焦点时自动停止）。

如果有人想查看我的代码，它几乎是：

animateFlash: function() {

    ctx_fg.clearRect(0,0,canvasWidth,canvasHeight);

    ctx_fg.fillStyle = 'rgba(177,39,116,1)';

    ctx_fg.strokeStyle = 'none';

    ctx_fg.beginPath();

    for(var i in nodes) {

        nodes[i].drawFlash();

    }

    ctx_fg.fill();

    ctx_fg.closePath();

    var instance = this;

    var rafID = requestAnimationFrame(function(){

        instance.animateFlash();

    })

    var unfinishedNodes = nodes.filter(function(elem){

        return elem.timer < timerMax;

    });

    if(unfinishedNodes.length === 0) {

        console.log("done");

        cancelAnimationFrame(rafID);

        instance.animate();

    }

}

其中Node.drawFlash（）只是一些代码，它根据计数器变量确定半径，然后绘制一个圆。

Answer 1

我建议把你的电话换成requestAnimationFrame一个setTimeout。如果你setTimeout从你请求动画帧的函数中调用，那么你就失去了目的requestAnimationFrame。但如果你requestAnimationFrame从内部打电话setTimeout顺利工作：var fps = 25function animate() {&nbsp; setTimeout(function() {&nbsp; &nbsp; requestAnimationFrame(animate);&nbsp; }, 1000 / fps);}