Comment requestAnimationFrame contrôle-t-il la fréquence d'images ?
仅有的幸福
仅有的幸福 2017-05-16 13:44:28
0
3
748

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 ?

仅有的幸福
仅有的幸福

répondre à tous(3)
过去多啦不再A梦

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

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

迷茫

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

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal