使用 requestAnimationFrame 控制 fps? [英] Controlling fps with requestAnimationFrame?

问题描述

现在看来 requestAnimationFrame 是事实上的动画方式.在大多数情况下，它对我来说效果很好，但现在我正在尝试做一些画布动画，我想知道:有没有办法确保它以特定的 fps 运行?我知道 rAF 的目的是让动画始终流畅，我可能会冒着让我的动画断断续续的风险，但现在它似乎以完全不同的速度非常随意地运行，我想知道是否有办法对抗不知何故.

It seems like requestAnimationFrame is the de facto way to animate things now. It worked pretty well for me for the most part, but right now I'm trying to do some canvas animations and I was wondering: Is there any way to make sure it runs at a certain fps? I understand that the purpose of rAF is for consistently smooth animations, and I might run the risk of making my animation choppy, but right now it seems to run at drastically different speeds pretty arbitrarily, and I'm wondering if there's a way to combat that somehow.

我会使用 setInterval 但我想要 rAF 提供的优化(尤其是当标签处于焦点时自动停止).

I'd use setInterval but I want the optimizations that rAF offers (especially automatically stopping when the tab is in focus).

万一有人想看我的代码，那就差不多了:

In case someone wants to look at my code, it's pretty much:

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() 只是一些根据计数器变量确定半径然后绘制圆的代码.

Where Node.drawFlash() is just some code that determines radius based off a counter variable and then draws a circle.

推荐答案

如何将 requestAnimationFrame 限制为特定的帧率

5 FPS 的演示节流:http://jsfiddle.net/m1erickson/CtsY3/

Demo throttling at 5 FPS: http://jsfiddle.net/m1erickson/CtsY3/

此方法的工作原理是测试自执行上一帧循环以来经过的时间.

This method works by testing the elapsed time since executing the last frame loop.

您的绘图代码仅在您指定的 FPS 间隔结束时执行.

Your drawing code executes only when your specified FPS interval has elapsed.

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

The first part of the code sets some variables used to calculate elapsed time.

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 绘制.

And this code is the actual requestAnimationFrame loop which draws at your specified 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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！