Maison > Article > interface Web > Comment contrôler les fps à l’aide de requestAnimationFrame ?

Comment contrôler les fps à l’aide de requestAnimationFrame ?

WBOYavant: 2023-08-29 08:41:021073parcourir

如何使用 requestAnimationFrame 控制 fps？

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);

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>

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
}

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>

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>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Bubble.js : solutions 1,6K efficaces aux problèmes courantsArticle suivant：Bubble.js : solutions 1,6K efficaces aux problèmes courants

Articles Liés

Voir plus