使用requestAnimationFrame控制fps？

  • Z时代
  • 2024-01-10
  • 分类：问答

现在看来似乎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（）只是一些代码，这些代码根据计数器变量确定半径，然后绘制一个圆。

回答：

演示以5 FPS的速度节流：http :

//jsfiddle.net/m1erickson/CtsY3/

此方法通过测试自执行最后一个帧循环以来的经过时间来工作。

仅当指定的FPS间隔过去时，图形代码才会执行​​。

代码的第一部分设置了一些用于计算经过时间的变量。

var stop = false;
var frameCount = 0;
var $results = $("#results");
var fps, fpsInterval, startTime, now, then, elapsed;
// initialize the timer variables and start the animation
function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

这段代码是实际的requestAnimationFrame循环，以您指定的FPS绘制。

// the animation loop calculates time elapsed since the last loop
// and only draws if your specified fps interval is achieved
function animate() {
    // request another frame
    requestAnimationFrame(animate);
    // calc elapsed time since last loop
    now = Date.now();
    elapsed = now - then;
    // if enough time has elapsed, draw the next frame
    if (elapsed > fpsInterval) {
        // Get ready for next frame by setting then=now, but also adjust for your
        // specified fpsInterval not being a multiple of RAF's interval (16.7ms)
        then = now - (elapsed % fpsInterval);
        // Put your drawing code here
    }
}

以上是 使用requestAnimationFrame控制fps？ 的全部内容， 来源链接： utcz.com/qa/423403.html

回到顶部