Wie kann ich requestAnimationFrame auf eine bestimmte Bildrate drosseln?

RequestAnimationFrame auf eine bestimmte Bildrate drosseln

requestAnimationFrame ist aufgrund seiner Glätte und Optimierung zur bevorzugten Methode für Animationen geworden. Es gibt jedoch Situationen, in denen eine Steuerung der Animationsgeschwindigkeit gewünscht ist. In diesem Artikel wird erläutert, wie Sie requestAnimationFrame auf eine bestimmte Bildrate drosseln und so eine konsistente Animationsgeschwindigkeit unabhängig von der Geräteleistung sicherstellen.

Ein Ansatz zur Drosselung besteht darin, die seit der letzten Bildschleife verstrichene Zeit zu berechnen und nur dann zu zeichnen, wenn die angegebene FPS erreicht ist Intervall ist abgelaufen. Bei dieser Methode werden Variablen festgelegt, um Zeitintervalle zu verfolgen.

<code class="javascript">var fpsInterval = 1000 / fps; // Convert FPS to milliseconds
var then = Date.now(); // Start time of the current animation loop</code>

Die Animationsschleife wird mithilfe von requestAnimationFrame implementiert und kontinuierlich aufgerufen. Innerhalb der Schleife wird die seit der letzten Schleife verstrichene Zeit berechnet und das Zeichnen wird nur durchgeführt, wenn das angegebene FPS-Intervall verstrichen ist.

<code class="javascript">function animate() {
    requestAnimationFrame(animate);
    now = Date.now();
    elapsed = now - then;
    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval); // Adjust for non-multiple FPS intervals
        // Put your drawing code here
    }
}</code>

Durch die Verwendung dieser Drosselungstechnik wird der Zeichencode zum angegebenen Zeitpunkt ausgeführt FPS, wodurch eine konstante Animationsgeschwindigkeit auch auf Geräten mit unterschiedlichen Leistungsfähigkeiten gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWie kann ich requestAnimationFrame auf eine bestimmte Bildrate drosseln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!