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

问题描述

好像requestAnimationFrame现在以动画的东西事实上的方式。它的工作pretty很适合我的大部分，但现在我试图做一些帆布动画，我想知道：有没有什么办法，以确保它运行在一定的FPS？据我所知，英国皇家空军的目的是一致的流畅的动画，我可能会遇到让我的动画震荡的风险，但现在它似乎随意运行在显着不同的速度pretty，我想知道如果有一个办法打击，不知怎的。

It seems like requestAnimationFrame is the de facto way to animate things now. It's 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).

在万一有人想看看我的code，它是pretty多少：

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（）只是一些code，其基于半径过计数器变量，然后绘制一个圆。

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.

您绘图code执行，只有当你指定的FPS间隔过去。

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

在code的第一部分设置用于计算经过的时间一些变量。

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

这code是实际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屋！