使用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 = 25

function animate() {

  setTimeout(function() {

    requestAnimationFrame(animate);

  }, 1000 / fps);

}