Comment puis-je contrôler la fréquence d'images des animations à l'aide de requestAnimationFrame ?

Contrôle de la fréquence d'images avec requestAnimationFrame

requestAnimationFrame fournit un moyen cohérent et performant d'animer du contenu. Cependant, il est conçu pour donner la priorité à la fluidité plutôt qu’au maintien d’une fréquence d’images spécifique. Cela peut parfois conduire à des fréquences d'images incohérentes, en particulier dans les animations qui nécessitent un timing précis.

Limiter requestAnimationFrame à une fréquence d'images spécifique

Pour contrôler la fréquence d'images avec requestAnimationFrame, vous pouvez limiter son exécution à l'aide d'une boucle d'animation personnalisée. Cette approche vous permet de spécifier une fréquence d'images cible et de garantir que le code de dessin ne s'exécute que lorsque l'intervalle spécifié est écoulé.

Voici comment limiter requestAnimationFrame à une fréquence d'images spécifique :

1. Calculez l'intervalle cible : Déterminez la fréquence d'images souhaitée (par exemple, 30 ips). Calculez l'intervalle entre les images (par exemple, 1000/30 = 33,33 ms).
2. Initialisez les variables : Définissez des variables pour suivre le temps écoulé, le nombre d'images et l'heure de début.
3. Créez la boucle d'animation personnalisée : Utilisez requestAnimationFrame pour appeler en continu la boucle d'animation. Calculez le temps écoulé depuis la dernière boucle en utilisant Date.now(). Si le temps écoulé est supérieur à l'intervalle cible, exécutez le code de dessin.
4. Ajustez pour les intervalles non exacts : En raison du fonctionnement de requestAnimationFrame, l'intervalle cible peut ne pas s'aligner exactement avec Intervalle interne du RAF (16,7 ms). Ajustez la variable then en soustrayant tout temps écoulé en excès pour garantir un timing précis.

En limitant requestAnimationFrame à une fréquence d'images spécifique, vous pouvez obtenir des animations plus cohérentes et réduire toute instabilité perçue. Cependant, il est important d'équilibrer cela avec les implications potentielles en termes de performances, car la boucle personnalisée peut introduire une surcharge supplémentaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!