数据结构
网络
关系型数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用requestAnimationFrame控制帧率(fps)
fps一词通常与视频和游戏相关，在这些领域需要使用动画。fps是每秒帧数的缩写，表示屏幕每秒重新渲染的次数。
例如，视频是由连续的图像序列组成的。这意味着它以非常短的间隔显示图像，以至于用户无法察觉到它是逐帧显示的。如果降低视频的fps，它看起来可能更像动画而不是视频。因此，更高的fps通常能带来更好的效果。基本上，fps告诉我们屏幕每秒应该更新多少次。
有时，我们需要使用JavaScript来控制fps。我们可以使用不同的方法，我们将在本教程中学习这些方法。
使用setTimeout()函数
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()对象获取当前时间和上一帧时间之间的差值。如果时间差超过帧间隔，我们将重新渲染屏幕。否则，我们将等待完成单帧。
语法
用户可以按照以下语法使用时间间隔来控制fps。
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>
877 次浏览
