Wie steuere ich FPS in Animationen mit requestAnimationFrame?

FPS mit requestAnimationFrame steuern

requestAnimationFrame hat sich zur bevorzugten Methode für flüssige Animationen entwickelt, kann jedoch manchmal mit unterschiedlichen Geschwindigkeiten ausgeführt werden. Hier ist eine Technik, um eine konsistente Bildrate sicherzustellen:

RequestAnimationFrame auf einen bestimmten FPS drosseln

Diese Methode verwendet eine bedingte Prüfung, um den Animationscode nur bei einem bestimmten FPS auszuführen Intervall ist abgelaufen.

Implementierung:

1. Variablen initialisieren:

   • Variablen erstellen für Stopp, FrameCount, verstrichene Zeit, Startzeit und FPS-Intervall.

2. Animation starten:

   • Initialisieren Sie diese Variablen und rufen Sie die Funktion animate() auf, um die Schleife zu starten.

3. Animationsschleife:

   • Berechnen Sie die verstrichene Zeit seit der letzten Schleife mit Date.now().
   • Wenn „elapsed“ größer als das fpsInterval ist, wird der nächste Frame gezeichnet.
   • Passen Sie dann an, um den Unterschied zwischen dem FPS-Intervall und dem RAF-Standardwert zu berücksichtigen Intervall.

4. Zeichnungscode:

   • Platzieren Sie Ihren Zeichnungscode in der bedingten Prüfung (bei Ablauf > fpsInterval) .

Beispielcode:

<code class="javascript">var stop = false;
var frameCount = 0;
var fps, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

function animate() {
    requestAnimationFrame(animate);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);

        // Put your drawing code here
    }
}</code>

Dieser Ansatz stellt sicher, dass die Animation unabhängig vom Browser mit den angegebenen FPS ausgeführt wird Rendering-Geschwindigkeit.

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