最简单的方法

Question

似乎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（）只是一些基于计数器变量确定半径然后绘制圆的代码。

Answer 1

如何将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;


// 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

    }
}

Answer 2

更新2016/6

限制帧速率的问题是屏幕具有恒定的更新速率，通常为60 FPS。

如果我们想要24 FPS，我们永远不会在屏幕上获得真正的24 fps，我们可以这样计时但不显示它，因为显示器只能显示15 fps，30 fps或60 fps的同步帧（某些显示器）也是120 fps）。

但是，出于计时目的，我们可以在可能的情况下进行计算和更新。

您可以通过将计算和回调封装到对象中来构建控制帧速率的所有逻辑：

function FpsCtrl(fps, callback) {

    var delay = 1000 / fps,                               // calc. time per frame
        time = null,                                      // start time
        frame = -1,                                       // frame count
        tref;                                             // rAF time reference

    function loop(timestamp) {
        if (time === null) time = timestamp;              // init start time
        var seg = Math.floor((timestamp - time) / delay); // calc frame no.
        if (seg > frame) {                                // moved to next frame?
            frame = seg;                                  // update
            callback({                                    // callback function
                time: timestamp,
                frame: frame
            })
        }
        tref = requestAnimationFrame(loop)
    }
}

然后添加一些控制器和配置代码：

// play status
this.isPlaying = false;

// set frame-rate
this.frameRate = function(newfps) {
    if (!arguments.length) return fps;
    fps = newfps;
    delay = 1000 / fps;
    frame = -1;
    time = null;
};

// enable starting/pausing of the object
this.start = function() {
    if (!this.isPlaying) {
        this.isPlaying = true;
        tref = requestAnimationFrame(loop);
    }
};

this.pause = function() {
    if (this.isPlaying) {
        cancelAnimationFrame(tref);
        this.isPlaying = false;
        time = null;
        frame = -1;
    }
};

用法

变得非常简单 - 现在，我们所要做的就是通过设置回调函数和所需的帧速率来创建一个实例，如下所示：

var fc = new FpsCtrl(24, function(e) {
     // render each frame here
  });

然后开始（如果需要，可以是默认行为）：

fc.start();

就是这样，所有逻辑都在内部处理。

演示

var ctx = c.getContext("2d"), pTime = 0, mTime = 0, x = 0;
ctx.font = "20px sans-serif";

// update canvas with some information and animation
var fps = new FpsCtrl(12, function(e) {
	ctx.clearRect(0, 0, c.width, c.height);
	ctx.fillText("FPS: " + fps.frameRate() + 
                 " Frame: " + e.frame + 
                 " Time: " + (e.time - pTime).toFixed(1), 4, 30);
	pTime = e.time;
	var x = (pTime - mTime) * 0.1;
	if (x > c.width) mTime = pTime;
	ctx.fillRect(x, 50, 10, 10)
})

// start the loop
fps.start();

// UI
bState.onclick = function() {
	fps.isPlaying ? fps.pause() : fps.start();
};

sFPS.onchange = function() {
	fps.frameRate(+this.value)
};

function FpsCtrl(fps, callback) {

	var	delay = 1000 / fps,
		time = null,
		frame = -1,
		tref;

	function loop(timestamp) {
		if (time === null) time = timestamp;
		var seg = Math.floor((timestamp - time) / delay);
		if (seg > frame) {
			frame = seg;
			callback({
				time: timestamp,
				frame: frame
			})
		}
		tref = requestAnimationFrame(loop)
	}

	this.isPlaying = false;
	
	this.frameRate = function(newfps) {
		if (!arguments.length) return fps;
		fps = newfps;
		delay = 1000 / fps;
		frame = -1;
		time = null;
	};
	
	this.start = function() {
		if (!this.isPlaying) {
			this.isPlaying = true;
			tref = requestAnimationFrame(loop);
		}
	};
	
	this.pause = function() {
		if (this.isPlaying) {
			cancelAnimationFrame(tref);
			this.isPlaying = false;
			time = null;
			frame = -1;
		}
	};
}

body {font:16px sans-serif}

<label>Framerate: <select id=sFPS>
	<option>12</option>
	<option>15</option>
	<option>24</option>
	<option>25</option>
	<option>29.97</option>
	<option>30</option>
	<option>60</option>
</select></label><br>
<canvas id=c height=60></canvas><br>
<button id=bState>Start/Stop</button>

旧答案

requestAnimationFrame的主要目的是将更新同步到监视器的刷新率。这将要求您为显示器的FPS或其系数设置动画（例如，对于60 Hz的典型刷新率，为60,30,15 FPS）。

如果你想要一个更随意的FPS，那么使用rAF是没有意义的，因为帧速率永远不会与显示器的更新频率相匹配（只是这里和那里的一个帧），它根本无法给你一个平滑的动画（就像所有帧一样）重新定时）您也可以使用setTimeout或setInterval代替。

当您想要以不同的FPS播放视频然后显示其刷新的设备时，这也是专业视频行业中众所周知的问题。已经使用了许多技术，例如帧混合和基于运动矢量的复杂重新定时重建中间帧，但是使用画布这些技术不可用，结果将始终是生涩的视频。

var FPS = 24;  /// "silver screen"
var isPlaying = true;

function loop() {
    if (isPlaying) setTimeout(loop, 1000 / FPS);

    ... code for frame here
}

我们首先放置setTimeout 的原因（以及为什么某些地方rAF在使用多边形填充时的原因）是因为{{ {1}}将在循环开始时立即对事件进行排队，这样无论剩余代码将使用多长时间（假设它没有超过超时间隔），下一个调用将是它所代表的间隔（对于纯rAF）这不是必要的，因为在任何情况下rAF都会尝试跳到下一帧。）

另外值得注意的是，将它放在第一位也会冒着与setTimeout一样堆叠的风险。对于此用途，setInterval可能稍微准确一些。

您可以使用setInterval代替在循环中执行此操作。

setInterval

停止循环：

var FPS = 29.97;   /// NTSC
var rememberMe = setInterval(loop, 1000 / FPS);

function loop() {

    ... code for frame here
}

为了在标签变得模糊时降低帧速率，您可以添加如下因子：

clearInterval(rememberMe);

这样你可以将FPS降低到1/4等。

Answer 3

我建议将requestAnimationFrame中的setTimeout打包到setTimeout。如果您从请求动画帧的函数中调用requestAnimationFrame，那么您将失去requestAnimationFrame的目的。但是，如果您从setTimeout内拨打var fps = 25 function animate() { setTimeout(function() { requestAnimationFrame(animate); }, 1000 / fps); }，它就可以顺利运行：

<ListBox Name="lbTemp" ItemsSource="{Binding SrcPermissionList}"/>

Answer 4

这些都是理论上的好主意，直到你深入。 问题是你不能在没有去同步的情况下限制RAF，打败它是现有的目的。 所以你让它以全速运行，并在一个单独的更新你的数据循环，甚至是一个单独的线程！

是的，我说过了。您可以在浏览器中执行多线程JavaScript！

我知道有两种方法可以很好地工作而不会使用jank，使用更少的果汁和产生更少的热量。精确的人体计时和机器效率是最终结果。

道歉，如果这有点罗嗦，但这里有......

方法1：通过setInterval更新数据，通过RAF更新图形。

使用单独的setInterval更新平移和旋转值，物理，碰撞等。将这些值保存在每个动画元素的对象中。将变换字符串分配给对象中的每个setInterval“frame”中的变量。将这些对象保存在一个数组中。将您的间隔设置为所需的fps，单位为ms：ms =（1000 / fps）。这保持了一个稳定的时钟，允许任何设备上的相同fps，无论RAF速度如何。 不要在此处将变换分配给元素！

在requestAnimationFrame循环中，使用old-school for循环遍历数组 - 不要在这里使用较新的表单，它们很慢！

for(var i=0; i<sprite.length-1; i++){  rafUpdate(sprite[i]);  }

在rafUpdate函数中，从数组中的js对象获取变换字符串，并获取其元素id。您应该已经将“精灵”元素附加到变量上，或者通过其他方式轻松访问，这样您就不会浪费时间在RAF中“获取”它们。将它们保存在以html id命名的对象中的效果非常好。在它进入SI或RAF之前设置该部分。

使用RAF仅更新变换，仅使用3D变换（即使是2d），并设置css“will-change：transform;”关于将要改变的元素。这样可以使您的变换尽可能地同步到本机刷新率，在GPU中启动，并告诉浏览器最集中的位置。

所以你应该有类似这样的伪代码......

// refs to elements to be transformed, kept in an array
var element = [
   mario: document.getElementById('mario'),
   luigi: document.getElementById('luigi')
   //...etc.
]

var sprite = [  // read/write this with SI.  read-only from RAF
   mario: { id: mario  ....physics data, id, and updated transform string (from SI) here  },
   luigi: {  id: luigi  .....same  }
   //...and so forth
] // also kept in an array (for efficient iteration)

//update one sprite js object
//data manipulation, CPU tasks for each sprite object
//(physics, collisions, and transform-string updates here.)
//pass the object (by reference).
var SIupdate = function(object){
  // get pos/rot and update with movement
  object.pos.x += object.mov.pos.x;  // example, motion along x axis
  // and so on for y and z movement
  // and xyz rotational motion, scripted scaling etc

  // build transform string ie
  object.transform =
   'translate3d('+
     object.pos.x+','+
     object.pos.y+','+
     object.pos.z+
   ') '+

   // assign rotations, order depends on purpose and set-up. 
   'rotationZ('+object.rot.z+') '+
   'rotationY('+object.rot.y+') '+
   'rotationX('+object.rot.x+') '+

   'scale3d('.... if desired
  ;  //...etc.  include 
}


var fps = 30; //desired controlled frame-rate


// CPU TASKS - SI psuedo-frame data manipulation
setInterval(function(){
  // update each objects data
  for(var i=0; i<sprite.length-1; i++){  SIupdate(sprite[i]);  }
},1000/fps); //  note ms = 1000/fps


// GPU TASKS - RAF callback, real frame graphics updates only
var rAf = function(){
  // update each objects graphics
  for(var i=0; i<sprite.length-1; i++){  rAF.update(sprite[i])  }
  window.requestAnimationFrame(rAF); // loop
}

// assign new transform to sprite's element, only if it's transform has changed.
rAF.update = function(object){     
  if(object.old_transform !== object.transform){
    element[object.id].style.transform = transform;
    object.old_transform = object.transform;
  }
} 

window.requestAnimationFrame(rAF); // begin RAF

这样可以保持对数据对象的更新，并将SI中的字符串同步到所需的“帧”速率，并且RAF中的实际变换分配同步到GPU刷新率。因此实际的图形更新仅在RAF中，但是对数据的更改以及构建变换字符串都在SI中，因此没有jankies，但“时间”以所需的帧速率流动。

流速：

[setup js sprite objects and html element object references]

[setup RAF and SI single-object update functions]

[start SI at percieved/ideal frame-rate]
  [iterate through js objects, update data transform string for each]
  [loop back to SI]

[start RAF loop]
  [iterate through js objects, read object's transform string and assign it to it's html element]
  [loop back to RAF]

方法2.将SI放入网络工作者。这个是FAAAST并且顺利！

与方法1相同，但将SI放在web-worker中。它将在一个完全独立的线程上运行，然后让页面只处理RAF和UI。将精灵数组来回传递为“可转移对象”。这快速了。克隆或序列化没有时间，但它不像是通过引用传递，因为来自另一方的引用被破坏，所以你需要将双方传递到另一方，并且只在存在时更新它们，排序就像在高中时和女朋友来回传递一张纸条一样。

一次只能有一个人可以读写。这是好的，只要他们检查是否未定义以避免错误。 RAF是快速的，会立即将它踢回来，然后通过一堆GPU帧检查它是否已被发回。 Web工作者中的SI将在大多数时间内拥有精灵阵列，并将更新位置，移动和物理数据，以及创建新的变换字符串，然后将其传递回页面中的RAF。

这是我通过脚本动画元素的最快方式。这两个函数将作为两个独立的程序在两个独立的线程上运行，利用多核CPU的方式，而单个js脚本则不会。多线程javascript动画。

它会在没有抖动的情况下顺利完成，但是在实际指定的帧速率下，几乎没有分歧。

结果：

这两种方法中的任何一种都可以确保您的脚本在任何PC，手机，平板电脑等上以相同的速度运行（当然，在设备和浏览器的功能范围内）。

Answer 5

如何轻松限制到特定的FPS：

// timestamps are ms passed since document creation.
// lastTimestamp can be initialized to 0, if main loop is executed immediately
var lastTimestamp = 0,
    maxFPS = 30,
    timestep = 1000 / maxFPS; // ms for each frame

function main(timestamp) {
    window.requestAnimationFrame(main);

    // skip if timestep ms hasn't passed since last frame
    if (timestamp - lastTimestamp < timestep) return;

    lastTimestamp = timestamp;

    // draw frame here
}

window.requestAnimationFrame(main);

来源：A Detailed Explanation of JavaScript Game Loops and Timing by Isaac Sukin

Answer 6

在自定义fps中跳过 requestAnimationFrame 导致不流畅（所需）动画。

// Input/output DOM elements
var $results = $("#results");
var $fps = $("#fps");
var $period = $("#period");

// Array of FPS samples for graphing

// Animation state/parameters
var fpsInterval, lastDrawTime, frameCount_timed, frameCount, lastSampleTime, 
		currentFps=0, currentFps_timed=0;
var intervalID, requestID;

// Setup canvas being animated
var canvas = document.getElementById("c");
var canvas_timed = document.getElementById("c2");
canvas_timed.width = canvas.width = 300;
canvas_timed.height = canvas.height = 300;
var ctx = canvas.getContext("2d");
var ctx2 = canvas_timed.getContext("2d");


// Setup input event handlers

$fps.on('click change keyup', function() {
    if (this.value > 0) {
        fpsInterval = 1000 / +this.value;
    }
});

$period.on('click change keyup', function() {
    if (this.value > 0) {
        if (intervalID) {
            clearInterval(intervalID);
        }
        intervalID = setInterval(sampleFps, +this.value);
    }
});


function startAnimating(fps, sampleFreq) {

    ctx.fillStyle = ctx2.fillStyle = "#000";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx2.fillRect(0, 0, canvas.width, canvas.height);
    ctx2.font = ctx.font = "32px sans";
    
    fpsInterval = 1000 / fps;
    lastDrawTime = performance.now();
    lastSampleTime = lastDrawTime;
    frameCount = 0;
    frameCount_timed = 0;
    animate();
    
    intervalID = setInterval(sampleFps, sampleFreq);
		animate_timed()
}

function sampleFps() {
    // sample FPS
    var now = performance.now();
    if (frameCount > 0) {
        currentFps =
            (frameCount / (now - lastSampleTime) * 1000).toFixed(2);
        currentFps_timed =
            (frameCount_timed / (now - lastSampleTime) * 1000).toFixed(2);
        $results.text(currentFps + " | " + currentFps_timed);
        
        frameCount = 0;
        frameCount_timed = 0;
    }
    lastSampleTime = now;
}

function drawNextFrame(now, canvas, ctx, fpsCount) {
    // Just draw an oscillating seconds-hand
    
    var length = Math.min(canvas.width, canvas.height) / 2.1;
    var step = 15000;
    var theta = (now % step) / step * 2 * Math.PI;

    var xCenter = canvas.width / 2;
    var yCenter = canvas.height / 2;
    
    var x = xCenter + length * Math.cos(theta);
    var y = yCenter + length * Math.sin(theta);
    
    ctx.beginPath();
    ctx.moveTo(xCenter, yCenter);
    ctx.lineTo(x, y);
  	ctx.fillStyle = ctx.strokeStyle = 'white';
    ctx.stroke();
    
    var theta2 = theta + 3.14/6;
    
    ctx.beginPath();
    ctx.moveTo(xCenter, yCenter);
    ctx.lineTo(x, y);
    ctx.arc(xCenter, yCenter, length*2, theta, theta2);

    ctx.fillStyle = "rgba(0,0,0,.1)"
    ctx.fill();
    
    ctx.fillStyle = "#000";
    ctx.fillRect(0,0,100,30);
    
    ctx.fillStyle = "#080";
    ctx.fillText(fpsCount,10,30);
}

// redraw second canvas each fpsInterval (1000/fps)
function animate_timed() {
    frameCount_timed++;
    drawNextFrame( performance.now(), canvas_timed, ctx2, currentFps_timed);
    
    setTimeout(animate_timed, fpsInterval);
}

function animate(now) {
    // request another frame
    requestAnimationFrame(animate);
    
    // calc elapsed time since last loop
    var elapsed = now - lastDrawTime;

    // if enough time has elapsed, draw the next frame
    if (elapsed > fpsInterval) {
        // Get ready for next frame by setting lastDrawTime=now, but...
        // Also, adjust for fpsInterval not being multiple of 16.67
        lastDrawTime = now - (elapsed % fpsInterval);

        frameCount++;
    		drawNextFrame(now, canvas, ctx, currentFps);
    }
}
startAnimating(+$fps.val(), +$period.val());

input{
  width:100px;
}
#tvs{
  color:red;
  padding:0px 25px;
}
H3{
  font-weight:400;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>requestAnimationFrame skipping <span id="tvs">vs.</span> setTimeout() redraw</h3>
<div>
    <input id="fps" type="number" value="33"/> FPS:
    <span id="results"></span>
</div>
<div>
    <input id="period" type="number" value="1000"/> Sample period (fps, ms)
</div>
<canvas id="c"></canvas><canvas id="c2"></canvas>

@tavnab的原始代码。

Answer 7

var time = 0;
var time_framerate = 1000; //in milliseconds

function animate(timestamp) {
  if(timestamp > time + time_framerate) {
    time = timestamp;    

    //your code
  }

  window.requestAnimationFrame(animate);
}

Answer 8

此问题的简单解决方案是，如果不需要渲染帧，则从渲染循环返回：

const FPS = 60;
let prevTick = 0;    

function render() 
{
    requestAnimationFrame(render);

    // clamp to fixed framerate
    let now = Math.round(FPS * Date.now() / 1000);
    if (now == prevTick) return;
    prevTick = now;

    // otherwise, do your stuff ...
}

重要的是要知道requestAnimationFrame取决于用户监视器的刷新率（vsync）。因此，例如，如果您在仿真中未使用单独的计时器机制，则依靠requestAnimationFrame来提高游戏速度将使其无法在200Hz显示器上播放。

Answer 9

我总是以非常简单的方式做到这一点，而不会弄乱时间戳：

var fps, eachNthFrame, frameCount;

fps = 30;

//This variable specifies how many frames should be skipped.
//If it is 1 then no frames are skipped. If it is 2, one frame 
//is skipped so "eachSecondFrame" is renderd.
eachNthFrame = Math.round((1000 / fps) / 16.66);

//This variable is the number of the current frame. It is set to eachNthFrame so that the 
//first frame will be renderd.
frameCount = eachNthFrame;

requestAnimationFrame(frame);

//I think the rest is self-explanatory
fucntion frame() {
  if (frameCount == eachNthFrame) {
    frameCount = 0;
    animate();
  }
  frameCount++;
  requestAnimationFrame(frame);
}

Answer 10

最简单的方法

注意：它在具有不同帧速率的不同屏幕上可能表现不同。


const FPS = 30;
let lastTimestamp = 0;


function update(timestamp) {
  requestAnimationFrame(update);
  if (timestamp - lastTimestamp < 1000 / FPS) return;
  
  
   /* <<< PUT YOUR CODE HERE >>>  */

 
  lastTimestamp = timestamp;
}


update();

Answer 11

以下是我发现的一个很好的解释：CreativeJS.com，在传递给requestAnimationFrame的函数中包装一个setTimeou）调用。我对一个“普通”requestedtionAnimationFrame的关注是，“如果我只希望它每秒动画三次？”即使使用requestAnimationFrame（而不是setTimeout），它仍然仍然浪费（一些）“能量”（意味着浏览器代码正在做某事，并可能减慢系统速度）60或120或然而，每秒钟很多次，而不是每秒钟只有两三次（如您所愿）。

出于这个原因，我大部分时间都使用JavaScript运行我的浏览器 off 。但是，我正在使用Yosemite 10.10.3，我认为它有一些计时器问题 - 至少在我的旧系统上（相对较旧 - 意味着2011年）。

Answer 12

要将 FPS 限制为任何值，请参阅 jdmayfields answer。但是，对于将帧速率减半的非常快速和简单的解决方案，您可以通过以下方式仅每 2 帧进行一次计算：

requestAnimationFrame(render);
function render() {
  // ... computations ...
  requestAnimationFrame(skipFrame);
}
function skipFrame() { requestAnimationFrame(render); }

同样，您可以始终调用 render 但使用变量来控制您这次是否进行计算，允许您也将 FPS 减少到三分之一或四分之一（在我的情况下，对于示意性 webgl-animation 20fps 仍然足够，同时显着降低客户端的计算负载）

使用requestAnimationFrame控制fps？

12 个答案:

用法

演示

最简单的方法