极客笔记如何使用requestAnimationFrame控制FPS
FPS一词通常与需要使用动画的视频和游戏相关联。FPS是每秒帧数的缩写，意思是当前屏幕重新渲染的次数。
例如，视频是一系列连续的图像。这意味着它以非常短的间隔显示图像，以便用户无法知道它是单独显示图像的。如果我们降低视频的FPS，它可能看起来像图像动画而不是视频。因此，更高的FPS可以获得更好的结果。基本上，FPS告诉我们每秒钟应该更新屏幕多少次。
有时，我们需要使用JavaScript来控制FPS。我们可以使用不同的方法，我们将在本教程中学习。
使用SetTime()函数
setTimeout()函数接受一个回调函数作为第一个参数，并以时间间隔作为第二个参数。在这里，我们可以在每个时间间隔后重新渲染屏幕以控制FPS。
语法
用户可以按照下面的语法使用setTimeout()函数来控制FPS。
setTimeout(() => {
requestAnimationFrame(animate);
}, interval);
在上述语法中，我们使用requestAnimationFrame()方法调用了animate()函数。
步骤
- 步骤1 − 定义totalFrames变量并用零初始化。它将计算总帧数。
-
步骤2 − 同样，定义fps变量并存储fps的值。
-
步骤3 − 定义intervalOffps变量并将间隔存储其中。它存储了1000/fps，其中1000是毫秒，通过将其除以fps得到时间间隔。
-
步骤4 − 将当前时间存储在startTime变量中。
-
步骤5 − 调用animate()函数。
-
第5.1步 − 使用setTimeout()函数每隔intervalOffps调用requestAnimationFrame()函数。
-
第5.2步 − 在setTimeout()函数的回调函数中，用户可以编写代码重新渲染屏幕或在Canvas上绘制形状。
-
第5.3步 − 使用Date()对象获取当前时间。从开始时间中减去当前时间以获取经过的时间。
-
第5.4步 − 使用数学函数，计算总fps和总时间。
示例1
在下面的示例中，我们使用setTimeout()函数来控制fps。将‘3’作为fps的值。因此，我们的fps间隔等于1000/3。因此，我们将在每1000/3毫秒后调用requestAnimationFrame()方法。
<html>
<body>
<h3> Using the <i> setTimeOut() method </i> to control the fps with requestAnimationFrame </h3>
<div id="output"> </div>
<script>
let output = document.getElementById("output");
// Initial frame count set to zero
var totalFrames = 0;
var current, consumedTime;
// Set the fps at which the animation will run (say 10 fps)
var fps = 3;
var intervalOffps = 1000 / fps;
var AfterTime = Date.now();
var starting = AfterTime;
animate();
function animate() {
setTimeout(() => {
// call the animate function recursively
requestAnimationFrame(animate);
// get current time
current = Date.now();
// get elapsed time since the last frame
var elapsed = current - starting;
//Divide elapsed time with frame count to get fps
var currentFps =
Math.round((1000 / (elapsed / ++totalFrames)) * 100) / 100;
output.innerHTML = "Total elapsed time is equal to = " + Math.round((elapsed / 1000) * 100) / 100 + "<br>" + " secs @ ";
output.innerHTML += currentFps + " fps.";
}, intervalOffps);
}
</script>
</body>
</html>
使用 Date() 对象
我们可以使用 Date() 对象获取当前时间与上一帧时间的差值。如果时间差超过帧间隔，我们会重新渲染屏幕。否则，我们会等待完成单帧。
语法
用户可以按照以下语法使用时间间隔来控制帧率。
consumedTime = current - AfterTime;
if (consumedTime > intervalOffps) {
// rerender screen
}
在上面的语法中，消耗的时间是当前时间和上一帧完成的时间之间的差值。
示例2
在下面的示例中，我们计算当前和上一帧之间的时间差。如果时间差大于时间间隔，我们重新渲染屏幕。
<html>
<body>
<h3> Using the <i> Date() object </i> to control the fps with requestAnimationFrame. </h3>
<div id = "output"> </div>
<script>
let output = document.getElementById("output");
// Initial framecount set to zero
var totalFrames = 0;
var current, consumedTime;
// Set the fps at which the animation will run (say 10 fps)
var fps = 50;
var intervalOffps = 1000 / fps;
var AfterTime = Date.now();
var starting = AfterTime;
animate();
function animate() {
// use date() object and requestAnimationFrame() to control fps
requestAnimationFrame(animate);
current = Date.now();
consumedTime = current - AfterTime;
// if the consumed time is greater than the interval of fps
if (consumedTime > intervalOffps) {
// draw on canvas here
AfterTime = current - (consumedTime % intervalOffps);
var elapsed = current - starting;
//Divide elapsed time with frame count to get fps
var currentFps =
Math.round((1000 / (elapsed / ++totalFrames)) * 100) / 100;
output.innerHTML = "Total elapsed time is equal to = " + Math.round((elapsed / 1000) * 100) / 100 + "<br>" + " secs @ ";
output.innerHTML += currentFps + " fps.";
}
}
</script>
</body>
</html>
示例3
在下面的示例中，用户可以使用输入范围来设置fps。之后，当用户点击按钮时，它将执行startAnimation()函数，该函数设置fps间隔并调用animate()函数。animate()函数调用drawShape()函数在画布上绘制形状并控制fps。
在这里，我们使用了一些方法来在画布上绘制形状。用户可以使用输入范围来改变fps，尝试对形状进行动画并观察动画中的差异。
<html>
<body>
<h3>Using the <i> Date() object </i> to control the fps with requestAnimationFrame. </h3>
<!-- creating an input range for fps -->
<input type = "range" min = "1" max = "100" value = "10" id = "fps" />
<button onclick = "startAnimation()"> Animate </button> <br><br>
<!-- canvas to draw shape -->
<canvas id = "canvas" width = "250" height = "250"> </canvas>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let animation;
let intervalOffps, current, after, elapsed;
let angle = 0;
// drawing a sha[e]
function drawShape() {
context.save();
context.translate(100, 100);
// change angle
context.rotate(Math.PI / 180 * (angle += 11));
context.moveTo(0, 0);
// draw line
context.lineTo(250, 250);
context.stroke();
context.restore();
// stop animation
if (angle >= 720) {
cancelAnimationFrame(animation);
}
}
function animate() {
// start animation and store its id
animation = requestAnimationFrame(animate);
current = Date.now();
elapsed = current - after;
// check if elapsed time is greater than interval, if yes, draw shape again
if (elapsed > intervalOffps) {
after = current - (elapsed % intervalOffps);
drawShape();
}
}
function startAnimation() {
// get fps value from input
let fpsInput = document.getElementById("fps");
let fps = fpsInput.value;
// calculate interval
intervalOffps = 1000 / fps;
after = Date.now();
requestAnimationFrame(animate);
}
</script>
</body>
</html>