Question

39

Controlling fps with requestAnimationFrame?

rated 0 times [ 41] [ 2] / answers: 1 / hits: 195011 / 11 Years ago, mon, november 4, 2013, 12:00:00

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.

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();

    }

}

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryley

Add To Favorites

Follow

Total Points: 118

Total Questions: 81

Total Answers: 102

Location: Kazakhstan

Member since Thu, Dec 23, 2021

3 Years ago

ryley questions

1 React.js i18n dynamically change language

Thu, Sep 2, 21, 00:00, 3 Years ago

1 Firefox error: NetworkError when attempting to fetch resource only from extension

Mon, Mar 29, 21, 00:00, 3 Years ago

1 Styles being overwritten by Material-UI style

Wed, Feb 12, 20, 00:00, 4 Years ago

1 Encrypt By javascript and decrypt by Java

Wed, Oct 30, 19, 00:00, 5 Years ago

1 Creating a button with each input JSON object using JavaScript

Wed, Sep 25, 19, 00:00, 5 Years ago

View All

answered 11 Years ago ira · Accepted Answer

How to throttle requestAnimationFrame to a specific frame rate

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

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

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();

}

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



    }

}