avant-propos
Dans les applications Web, il existe de nombreuses façons d'obtenir des effets d'animation. En Javascript, cela peut être réalisé via timer setTimeout, en css3, la transition et l'animation peuvent être utilisées, et en html5, le canevas peut également être réalisé. De plus, html5 fournit également une API dédiée à la demande d'animation, c'est-à-dire requestAnimationFrame, qui consiste à demander des images d'animation.
1. Qu'est-ce que requestAnimationFrame ?
Description MDN : window.requestAnimationFrame() indique au navigateur que vous souhaitez effectuer une animation, et demande au navigateur d'appeler la fonction de rappel spécifiée pour mettre à jour l'animation avant le prochain rafraîchissement. Cette méthode doit passer une fonction de rappel en tant que paramètre, et la fonction de rappel sera exécutée avant que le navigateur ne se redessine la prochaine fois.
requestAnimationFrame est une méthode JavaScript fournie par le navigateur pour effectuer des animations. Il nous permet de planifier des images d'animation en fonction du taux de rafraîchissement du navigateur, ce qui donne des animations plus fluides et plus efficaces.
La plupart des écrans d'ordinateur ont un taux de rafraîchissement de 60 Hz, ce qui se traduit approximativement par 60 rafraîchissements par seconde. La plupart des navigateurs limiteront l'opération de rafraîchissement à la fréquence de rafraîchissement de l'affichage, car même si elle dépasse cette fréquence, l'expérience utilisateur ne sera pas améliorée. Ainsi, le meilleur intervalle de boucle pour l'animation la plus fluide est de 1000 ms/60, soit environ 16,6 ms.
Dans le passé, afin de réaliser l'animation, la méthode setTimeout() ou setInterval() était souvent utilisée pour mettre à jour régulièrement la trame de l'animation. Cependant, de telles approches ne sont pas idéales car elles sont limitées par la précision de la minuterie et la variance des performances des navigateurs sur différents appareils. La façon dont ils fonctionnent en interne est que le paramètre d'intervalle spécifie simplement combien de temps le code d'animation sera ajouté à la file d'attente du thread de l'interface utilisateur du navigateur pour attendre l'exécution. Si d'autres tâches ont été ajoutées au début de la file d'attente, le code d'animation attendra que les tâches précédentes soient terminées avant de s'exécuter
L'émergence de requestAnimationFrame résout ce problème. Il utilise le taux de rafraîchissement du navigateur comme référence pour s'assurer que les mises à jour des images d'animation sont espacées de manière optimale entre chaque image, ce qui donne des animations plus fluides et plus naturelles.
2. Comment utiliser requestAnimationFrame ?
L'utilisation de requestAnimationFrame est très simple. Voici un exemple d'utilisation de base :
function animate() {
// 执行动画逻辑
timer=requestAnimationFrame(animate);
}
// 启动动画
let timer=requestAnimationFrame(animate);
//取消动画
cancelAnimationFrame(timer);
Dans l'exemple ci-dessus, nous avons défini une animatefonction nommée , qui contient la logique de l'animation. Ensuite, nous utilisons requestAnimationFramela méthode pour appeler animatela fonction, démarrant ainsi la boucle de l'animation. A animatela fin de la fonction, on appelle à nouveau requestAnimationFrame(animate)pour continuer la mise à jour de l'animation sur l'image suivante.
L'avantage est que requestAnimationFrameles images d'animation sont automatiquement programmées en fonction du taux de rafraîchissement du navigateur. Il appelle automatiquement la fonction que nous fournissons avant le début de chaque image, créant des animations fluides.
l'affaire
<html>
<head>
<title>requestAnimationFrame</title>
<style>
#box {
width: 500px;
margin-top: 20px;
background-color:pink;
}
</style>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<div id="box"></div>
<script>
window.onload = function () {
var stratBtn = document.querySelector("#start"),
stopBtn = document.querySelector("#stop"),
box = document.querySelector("#box");
var timer;
stratBtn.addEventListener("click", () => {
timer = requestAnimationFrame(test)
});
stopBtn.addEventListener("click", () => {
cancelAnimationFrame(timer);
});
function test() {
console.log(timer)
box.style.height = `${
timer}%`;
timer= requestAnimationFrame(test)
}
}
</script>
</body>
</html>
3. Comparaison de requestAnimationFrame avec d'autres techniques d'animation
Comparons maintenant requestAnimationFrame à d'autres techniques d'animation courantes.
1. setTimeout et setInterval
Comme mentionné précédemment, les méthodes setTimeout et setInterval présentent certains problèmes lors de l'implémentation d'animations, telles que l'imprécision de la minuterie et les différences de performances. En revanche, requestAnimationFrame utilise le taux de rafraîchissement du navigateur comme référence, ce qui permet de mieux maintenir la fluidité et les performances de l'animation.
2. Transitions et animations CSS3
Les transitions et animations CSS3 sont des effets d'animation obtenus grâce aux propriétés CSS et aux images clés. Par rapport à requestAnimationFrame, les animations CSS ont une syntaxe plus simple et, dans certains cas, de meilleures performances. Cependant, les animations CSS sont généralement plus adaptées aux effets d'animation simples, et pour les animations plus complexes qui nécessitent des calculs dynamiques, l'utilisation de JavaScript et de requestAnimationFrame est plus flexible et puissante.
3. WebGL et Canvas
WebGL et Canvas sont des technologies de dessin avancées basées sur HTML5, qui peuvent créer des graphiques complexes et des effets d'animation. Ils sont souvent utilisés en conjonction avec requestAnimationFrame pour des animations et des interactions plus complexes. requestAnimationFrame fournit un intervalle de temps précis, permettant de bien mettre à jour les graphismes sur Canvas ou WebGL entre chaque frame.
en conclusion
requestAnimationFrame est une méthode JavaScript puissante pour créer des effets d'animation fluides et efficaces sur les pages Web. Il utilise le taux de rafraîchissement du navigateur pour planifier les images d'animation, en évitant les inexactitudes de la minuterie et les différences de performances. Par rapport à d'autres techniques d'animation, requestAnimationFrame offre une meilleure fluidité et de meilleures performances, particulièrement adaptées aux effets d'animation complexes et aux applications interactives. Qu'il s'agisse de développer des jeux, de créer des interfaces interactives ou d'implémenter des effets visuels, requestAnimationFrame est un outil indispensable.