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

问题描述

看起来像 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（）

解决方案

div

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

演示在5 FPS时节流：http://jsfiddle.net/m1erickson/CtsY3/

此方法通过测试已用时间

您的绘图代码仅在您指定的FPS间隔过后才会执行。

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

  var stop = false; 
 var frameCount = 0; 
 var $ results = $（＃results）; 
 var fps，fpsInterval，startTime，now，then，elapsed; 
 
 
 //初始化定时器变量并启动动画
 
 function startAnimating（fps）{
 fpsInterval = 1000 / fps; 
 then = Date.now（）; 
 startTime = then; 
 animate（）; 
} 
  

这段代码是实际的requestAnimationFrame循环， / p>

  //动画循环计算自上次循环后经过的时间
 //，并且只有当您指定的fps间隔实现
 
 function animate（）{
 
 //请求另一个框架
 
 requestAnimationFrame（animate）; 
 
 //自上次循环以来经过的时间
 
 now = Date.now（）; 
 elapsed = now  -  then; 
 
 //如果已经过了足够的时间，绘制下一个框架
 
 if（elapsed> fpsInterval）{
 
 //准备好下一个框架通过设置then =现在，但也调整您的
 //指定的fpsInterval不是RAF的间隔（16.7ms）的倍数
 then = now  - （elapsed％fpsInterval）; 
 
 //将您的绘图代码放在这里
 
} 
} 
  

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.

Thanks!

解决方案

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

    }
}

这篇关于使用requestAnimationFrame控制fps？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！