Heim > Artikel > Web-Frontend > Wie steuere ich FPS mit requestAnimationFrame?

Wie steuere ich FPS mit requestAnimationFrame?

WBOYnach vorne: 2023-08-29 08:41:021071Durchsuche

如何使用 requestAnimationFrame 控制 fps？

fps ist ein Begriff, der normalerweise mit Videos und Spielen in Verbindung gebracht wird, bei denen wir Animationen verwenden müssen. fps ist die Abkürzung für Frames pro Sekunde und gibt an, wie oft der aktuelle Bildschirm neu gerendert wird.

Ein Video ist beispielsweise eine fortlaufende Reihe von Bildern. Das bedeutet, dass Bilder in sehr kurzen Abständen angezeigt werden, sodass der Benutzer nicht erkennen kann, dass die Bilder einzeln angezeigt werden. Wenn wir die FPS des Videos verringern, sieht es möglicherweise wie eine Bildanimation statt wie ein Video aus. Daher führen höhere fps zu besseren Ergebnissen. Grundsätzlich sagen uns fps, wie oft pro Sekunde der Bildschirm aktualisiert werden soll.

Manchmal müssen wir JavaScript verwenden, um die FPS zu steuern. Wir können verschiedene Methoden verwenden, die wir in diesem Tutorial kennenlernen werden.

Verwenden Sie die SetTime()-Funktion

Die Funktion

setTimeout() übernimmt die Callback-Funktion als ersten Parameter und das Zeitintervall als zweiten Parameter. Hier können wir die FPS steuern, indem wir den Bildschirm nach jedem Zeitintervall neu rendern.

Grammatik

Benutzer können die Funktion setTimeout() verwenden, um fps gemäß der folgenden Syntax zu steuern.

setTimeout(() => {
   requestAnimationFrame(animate);
}, interval);

Wir haben die Funktion animate() in der obigen Syntax mit der Methode requestAnimationFrame() aufgerufen.

Schritte

Schritt 1 – Definieren Sie die totalFrames-Variable und initialisieren Sie sie auf Null. Es wird die Gesamtzahl der Bilder aufgezeichnet.
Schritt 2 – Definieren Sie außerdem die fps-Variable und speichern Sie den fps-Wert.
Schritt 3 – Definieren Sie die Variable „IntervallOffps“ und speichern Sie darin Intervalle. Es speichert 1000/fps, wobei 1000 Millisekunden sind und wir das Zeitintervall erhalten, indem wir es durch fps dividieren.
Schritt 4 – Speichern Sie die aktuelle Zeit in der Variable startTime.
Schritt 5 – Rufen Sie die Funktion animate() auf.
Schritt 5.1 – Rufen Sie die Funktion „requestAnimationFrame()“ mit der Funktion „setTimeout()“ nach jedem internvalOffps auf.
Schritt 5.2 – In der Rückruffunktion der Funktion setTimeout() kann der Benutzer Code schreiben, um den Bildschirm neu zu rendern oder Formen auf der Leinwand zu zeichnen.
Schritt 5.3 – Verwenden Sie das Date()-Objekt und ermitteln Sie die aktuelle Uhrzeit. Subtrahieren Sie die Startzeit von der aktuellen Zeit, um die verstrichene Zeit zu erhalten.
Schritt 5.4 – Ermitteln Sie mithilfe mathematischer Funktionen die Gesamt-FPS und die Gesamtzeit.

Beispiel 1

Im folgenden Beispiel verwenden wir die Funktion setTimeout(), um fps zu steuern. Als Wert für fps verwenden wir „3“. Daher beträgt unser fps-Intervall 1000/3. Daher rufen wir alle 1000/3 Millisekunden die Methode requestAnimationFrame() auf.

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

Verwenden Sie das Date()-Objekt

Wir können das Date()-Objekt verwenden, um die Differenz zwischen der aktuellen Zeit und der vorherigen Frame-Zeit zu ermitteln. Wenn der Zeitunterschied das Frame-Intervall überschreitet, rendern wir den Bildschirm neu. Andernfalls warten wir, bis ein einzelner Frame abgeschlossen ist.

Grammatik

Benutzer können das Zeitintervall verwenden, um die Bildrate gemäß der folgenden Syntax zu steuern.

consumedTime = current - AfterTime;
if (consumedTime > intervalOffps) {
   // rerender screen
}

In der obigen Syntax ist die verstrichene Zeit die Differenz zwischen der aktuellen Zeit und der Zeit, zu der der letzte Frame abgeschlossen wurde.

Beispiel 2

Im Beispiel unten nehmen wir die Zeitdifferenz zwischen dem aktuellen Frame und dem letzten Frame. Wenn der Zeitunterschied größer als das Zeitintervall ist, rendern wir den Bildschirm neu.

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

Beispiel 3

Im folgenden Beispiel kann der Benutzer die fps mithilfe des Eingabebereichs festlegen. Wenn der Benutzer anschließend auf die Schaltfläche klickt, führt er die Funktion startAnimation() aus, die das fps-Intervall festlegt und die Funktion animate() aufruft. Die Funktion animate() ruft die Funktion drawShape() auf, um Formen auf der Leinwand zu zeichnen und die FPS zu steuern.

Hier haben wir einige Methoden zum Zeichnen von Formen auf der Leinwand verwendet. Benutzer können den Eingabebereich verwenden, um die FPS zu ändern, Formen zu animieren und den Unterschied in der Animation zu beobachten.

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

Das obige ist der detaillierte Inhalt vonWie steuere ich FPS mit requestAnimationFrame?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Bubble.js: Effiziente 1.6K-Lösungen für häufige ProblemeNächster Artikel：Bubble.js: Effiziente 1.6K-Lösungen für häufige Probleme

In Verbindung stehende Artikel

Mehr sehen