Dans les programmes d'animation par navigateur, nous utilisons généralement une minuterie pour faire défiler l'objet cible toutes les quelques millisecondes afin de le faire bouger. Maintenant, la bonne nouvelle est que les développeurs de navigateurs ont décidé : hé, pourquoi ne fournissons-nous pas une telle API dans le navigateur afin que nous puissions optimiser leurs animations pour les utilisateurs. Par conséquent, cette fonction requestAnimationFrame() est une API pour les effets d'animation. Vous pouvez l'utiliser pour les changements de style sur le DOM, l'animation du canevas ou WebGL.
Le navigateur peut optimiser les actions d'animation parallèles, réorganiser la séquence d'actions de manière plus raisonnable et réaliser des actions qui peuvent être combinées en un seul cycle de rendu, présentant ainsi un effet d'animation plus fluide. Par exemple, via requestAnimationFrame(), l’animation JS peut se produire simultanément avec l’animation/transformation CSS ou l’animation SVG SMIL. De plus, si vous exécutez une animation dans un onglet du navigateur, le navigateur la mettra en pause lorsque l'onglet n'est pas visible, ce qui réduira la pression sur le processeur et la mémoire et économisera la batterie.
Utilisation de requestAnimationFrame // couche de cale avec setTimeout fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };} )();// usage:// au lieu de setInterval(render, 16) ....(function animloop(){ requestAnimFrame(animloop); render();})();// placez le rAF *avant* le render() pour assurer une vitesse aussi proche que // 60 ips avec la solution de secours setTimeout.Une encapsulation plus fiable de requestAnimationFrame
Le technicien du navigateur Opera, Erik Möller, a encapsulé cette fonction pour la rendre mieux compatible avec différents navigateurs. Vous pouvez lire cet article, mais fondamentalement, son code décide s'il convient d'utiliser un délai de 4 ms ou de 16 ms pour correspondre au mieux à 60 ips. Vous trouverez ci-dessous ce code, vous pouvez l'utiliser, mais veuillez noter que ce code utilise des fonctions standard et que j'y ai ajouté des préfixes compatibles avec différents moteurs de navigateur.
(function() { var lastTime = 0; var sellers = ['webkit', 'moz']; for(var x = 0; x < sellers.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall }, timeToCall); lastTime = currTime + timeToCall }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id);Laissez-moi voir l'effet de l'utilisation de requestAnimationFrame
API requestAnimationFrame window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // l'heure unix});Les paramètres de la fonction de rappel peuvent être transmis dans le temps.
Prise en charge de requestAnimationFrame par divers navigateurs
Google Chrome, Firefox et IE10+ implémentent tous cette fonction Même si votre navigateur est très ancien, l'encapsulation requestAnimationFrame ci-dessus peut rendre cette méthode sans erreur sur IE8/9.