Comment requestAnimationFrame contrôle-t-il la fréquence d'images ?

Question

Je souhaite implémenter une animation dans le canevas. Chaque image d'animation est dessinée sur Sprite et connectée en une seule image. J'ai essayé d'utiliser setTimeout pour implémenter l'animation et j'ai constaté que l'image sautait. Cependant, requestAnimationFrame ne peut pas contrôler la fréquence d'images. faire si je veux dessiner 7 images en 1, gérer ?

Answer 1

requestAnimationFrame est appelé lorsque le navigateur restitue l'image suivante, on peut donc considérer que le taux d'appel de requestAnimationFrame est le taux de rafraîchissement du navigateur, qui est généralement de 60 images

Mais lorsque requestAnimationFrame appelle le rappel, un paramètre d'horodatage sera transmis. Vous pouvez juger en fonction de ce paramètre pour traiter la fréquence d'images dont vous avez réellement besoin

Par exemple, si vous voulez 7 images par seconde, vous pouvez l'écrire comme ceci

let step = (timestamp, elapsed) => {
    if (elapsed > 1000 / 7) {
        //TO DO SOMETHING
        elapsed = 0
    }
    
    window.requestAnimationFrame(
        _timestamp => step(_timestamp, elapsed + _timestamp - timestamp)
    )
}
window.requestAnimationFrame(timestamp => step(timestamp, 0))

Answer 2

Cela semble incontrôlable, le navigateur le calcule tout seul

Answer 3

Le taux de rafraîchissement de 1s7 images... est essentiellement l'effet du "saut d'images"...