"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Comment puis-je utiliser RequestAnimationFrame pour stabiliser la fréquence d'images (FPS) de mon animation ?

Comment puis-je utiliser RequestAnimationFrame pour stabiliser la fréquence d'images (FPS) de mon animation ?

Publié le 2024-11-09
Parcourir:773

How can I use RequestAnimationFrame to stabilize my animation\'s frame rate (FPS)?

RequestAnimationFrame Fps Stabilization

RequestAnimationFrame (rAF) est devenu répandu pour les animations, offrant une exécution fluide et efficace. Cependant, contrôler la fréquence d'images (FPS) pour garantir la cohérence peut être difficile.

Limitation de rAF à un FPS spécifique

Pour limiter rAF à un FPS spécifique, vous pouvez temps de levier écoulé depuis la dernière exécution de la trame. Votre code de dessin ne s'exécutera que lorsque l'intervalle FPS souhaité sera écoulé.

Extrait de code

Initialisez les variables de minuterie et démarrez l'animation :

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

La boucle rAF pour dessiner à votre FPS spécifié :

function animate() {

    requestAnimationFrame(animate);

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

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);
        // Your drawing code goes here
    }
}

En incorporant cette logique, vous pouvez limiter efficacement rAF pour obtenir le FPS souhaité, garantissant ainsi des animations cohérentes qui répondent à vos besoins spécifiques.

Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3