fps est un terme généralement associé aux vidéos et aux jeux où nous devons utiliser des animations. fps est l'abréviation d'images par seconde et représente le nombre de fois que l'écran actuel est restitué.
Par exemple, une vidéo est une rangée continue d'images. Cela signifie qu'il affiche les images à des intervalles très courts, de sorte que l'utilisateur n'a aucun moyen de savoir qu'il affiche les images individuellement. Si nous réduisons les fps de la vidéo, cela peut ressembler à une animation d’image au lieu d’une vidéo. Par conséquent, des fps plus élevés donnent de meilleurs résultats. Fondamentalement, fps nous indique combien de fois par seconde l'écran doit être mis à jour.
Parfois, nous devons utiliser JavaScript pour contrôler les fps. Il existe différentes méthodes que nous pouvons utiliser, que nous apprendrons dans ce tutoriel.
Utilisez la fonction SetTime()
La fonction
setTimeout() prend la fonction de rappel comme premier paramètre et l'intervalle de temps comme deuxième paramètre. Ici, nous pouvons contrôler les fps en restituant l'écran après chaque intervalle de temps.
Grammaire
Les utilisateurs peuvent utiliser la fonction setTimeout() pour contrôler les fps selon la syntaxe suivante.
setTimeout(() => {
requestAnimationFrame(animate);
}, interval);
Copier après la connexion
Nous avons appelé la fonction animate() dans la syntaxe ci-dessus en utilisant la méthode requestAnimationFrame().
Étapes
Étape 1 - Définissez la variable totalFrames et initialisez-la à zéro. Il enregistrera le nombre total d’images.
Étape 2 - Définissez également la variable fps et stockez la valeur de fps.
Étape 3 - Définissez la variable intervalOffps et stockez-y les intervalles. Il stocke 1 000/fps où 1 000 correspond à des millisecondes et nous obtenons l'intervalle de temps en le divisant par fps.
Étape 4 - Stockez l'heure actuelle dans la variable startTime.
Étape 5 - Appelez la fonction animate().
Étape 5.1 - Appelez la fonction requestAnimationFrame() en utilisant la fonction setTimeout() après chaque internvalOffps.
Étape 5.2 - Dans la fonction de rappel de la fonction setTimeout(), l'utilisateur peut écrire du code pour restituer l'écran ou dessiner des formes sur le canevas.
Étape 5.3 - Utilisez l'objet Date() et obtenez l'heure actuelle. Soustrayez l'heure de début de l'heure actuelle pour obtenir le temps écoulé.
Étape 5.4 - À l'aide des fonctions mathématiques, obtenez le nombre total de fps et le temps total.
Exemple 1
Dans l'exemple ci-dessous, nous utilisons la fonction setTimeout() pour contrôler les fps. Nous utilisons "3" comme valeur pour les fps. Par conséquent, notre intervalle fps est égal à 1000/3. Par conséquent, nous appellerons la méthode requestAnimationFrame() toutes les 1000/3 millisecondes.
<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>
Copier après la connexion
Utilisez l'objet Date()
Nous pouvons utiliser l'objet Date() pour obtenir la différence entre l'heure actuelle et l'heure de l'image précédente. Si la différence de temps dépasse l'intervalle d'image, nous restituerons l'écran. Sinon, nous attendons la fin d’une seule image.
Grammaire
Les utilisateurs peuvent utiliser l'intervalle de temps pour contrôler la fréquence d'images selon la syntaxe ci-dessous.
consumedTime = current - AfterTime;
if (consumedTime > intervalOffps) {
// rerender screen
}
Copier après la connexion
Dans la syntaxe ci-dessus, le temps écoulé est la différence entre l'heure actuelle et l'heure à laquelle la dernière image a été terminée.
Exemple 2
Dans l'exemple ci-dessous, nous prenons le décalage horaire entre la trame actuelle et la dernière trame. Si le décalage horaire est supérieur à l'intervalle de temps, nous restituons l'écran.
<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>
Copier après la connexion
Exemple 3
Dans l'exemple ci-dessous, l'utilisateur peut définir le fps en utilisant la plage d'entrée. Ensuite, lorsque l'utilisateur clique sur le bouton, il exécute la fonction startAnimation(), qui définit l'intervalle fps et appelle la fonction animate(). La fonction animate() appelle la fonction drawShape() pour dessiner des formes sur le canevas et contrôler les fps.
Ici, nous avons utilisé quelques méthodes pour dessiner des formes sur la toile. Les utilisateurs peuvent utiliser la plage d'entrée pour modifier les images par seconde, essayer d'animer des formes et observer la différence d'animation.
<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>
Copier après la connexion
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
