Présenté
Les minuteries ont toujours été la technologie de base de l'animation JavaScript. La clé pour écrire une boucle d'animation est de savoir combien de temps le retard est approprié. D'une part, l'intervalle de boucle doit être suffisamment court pour que différents effets d'animation puissent apparaître lisses et lisses; D'un autre côté, l'intervalle de boucle doit être suffisamment long pour que le navigateur puisse faire des changements.
La fréquence de rafraîchissement de la plupart des moniteurs informatiques est de 60 Hz, ce qui équivaut à peu près à la repection de 60 fois par seconde. La plupart des navigateurs limiteront le fonctionnement de redes-révocations pour ne pas dépasser la fréquence de redesque du moniteur, car même si elle dépasse cette fréquence, l'expérience utilisateur ne s'améliorera pas. Par conséquent, l'intervalle de boucle optimal pour l'animation la plus fluide est de 1000 ms / 60, ce qui est approximativement égal à 16,6 ms
Et le problème avec Settimeout et SetInterval est qu'ils ne sont pas exacts. Leur mécanisme de fonctionnement intrinsèque détermine que les paramètres d'intervalle de temps spécifient en fait la durée pour ajouter du code d'animation à la file d'attente de thread d'interface utilisateur pour attendre l'exécution. Si d'autres tâches ont été ajoutées à la file d'attente, le code d'animation doit attendre que les tâches précédentes soient terminées avant de les exécuter.
RequestanimationFrame utilise les intervalles de temps du système pour maintenir la meilleure efficacité de dessin et ne dépassera pas le temps d'intervalle court, ce qui augmentera les frais généraux; L'utilisation d'animations ne sera pas non plus bloquée et non fluide parce que le temps d'intervalle est trop long, de sorte que divers effets d'animation Web peuvent avoir un mécanisme de rafraîchissement unifié, économisant ainsi les ressources du système, améliorant les performances du système et améliorant les effets visuels
Caractéristiques
【1】 Le chré de demande de demande concentrera toutes les opérations DOM dans chaque trame, complète en une seule repection ou reflux, et l'intervalle de temps de repeinte ou de reflux est suivi de près par la fréquence de rafraîchissement du navigateur
【2】 Dans les éléments cachés ou invisibles, le Frame de demande de demande ne sera pas repeint ou reflux, ce qui signifie bien sûr moins de CPU, GPU et utilisation de la mémoire
【3】 DemandeAmationFrame est une API fournie par le navigateur spécifiquement pour l'animation. Lors de l'exécution, le navigateur optimisera automatiquement l'appel de la méthode. Si la page n'est pas activée, l'animation s'arrête automatiquement, enregistrant efficacement les frais généraux du processeur
utiliser
L'utilisation de RequestanimationFrame est très similaire à Settimeout, sauf qu'il n'est pas nécessaire de définir l'intervalle de temps. Le requêteAmationFrame utilise une fonction de rappel comme paramètre, qui est appelé avant les repeints du navigateur. Il renvoie un entier représentant le numéro de la minuterie, qui peut être transmis pour annuler le châme pour annuler l'exécution de cette fonction
requestId = requestAnimationFrame (rappel); // Sorties de console 1 et 0var Timer = requestanimationFrame (function () {console.log (0);}); console.log (temporisateur); // 1 Méthode CanceLanimationFrame est utilisée pour annuler la minuterie // Sorties de console rien var timer = requestanimationFrame (function () {console.log (0);}); CancelanimationFrame (temporisateur);Vous pouvez également utiliser la valeur de retour pour l'annuler directement
var timer = requestanimationFrame (function () {console.log (0);}); CanceLanimationFrame (1);compatible
IE9-Browser ne prend pas en charge cette méthode, vous pouvez utiliser Settimeout pour la compatibilité
if (! window.requestanimationframe) {var lasttime = 0; window.requestanimationframe = function (callback) {var currtime = new Date (). gettime (); var timetoCall = math.max (0,16.7- (currtime - dernier)); var id = window.Settimeout (function) {callback (currtime + timedal = currtime + timetocall; return id;}} if (! window.canceLanimationFrame) {window.canceLanimationFrame = function (id) {cleartimeout (id);};}application
Utilisez maintenant les trois méthodes de setInterval, settimeout et demanderAnimationFrame pour créer un effet système simple.
【1】 SetInterval
<div id = "myDiv" style = "background-Color: LightBlue; Width: 0; hauteur: 20px; line-height: 20px;"> 0% </div> <Button id = "btn"> run </utton> <script> var timer; btn.onclick = function () {ClearInterval (Timer); setInterval (function () {if (parseInt (mydiv.style.width) <500) {mydiv.style.width = parseInt (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width) / 5 + '%'; } else {ClearInterval (Timer);}}, 16);} </ script>【2】 Settimeout
<div id = "myDiv" style = "background-color: lightBlue; width: 0; hauteur: 20px; line-height: 20px;"> 0% </div> <button id = "btn"> run </utton> <script> var timer; btn.onclick = function () {cleartimeout (timiner); MyDiv.style.width = '0';; fn () {if (parseInt (mydiv.style.width) <500) {mydiv.style.width = parseInt (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width) / 5 + '%'; timiner = setTimeout (fn, 16);} else {cleartimeout (timer);}}, 16);} </cript>【3】 Requestanimationframe
<div id = "myDiv" style = "background-color: lightBlue; width: 0; hauteur: 20px; line-height: 20px;"> 0% </div> <Button id = "btn"> run </utton> <script> var timer; btn.onclick = function () {MyDiv.style.width = '0'; Annulamer requestanimationframe (function fn () {if (parseInt (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width) / 5 + '%'; requestanimationFrame (fn);} else {CanceLanimationFrame (Timer);}});} </ script>D'accord, le code est là pour introduire la troisième application Timer dans la série BOM (horloge, compte à rebours, chronomètre et réveil)
Ce qui précède est le deuxième chronomètre de demande de chronomation de la série BOM qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!