Avant l'émergence de Dequestanimationframe, nous utilisons généralement Settimeout et SetInterval, alors pourquoi HTML5 ajoute-t-il un nouveau demandes de demande?
Avantages et caractéristiques:1) RequestanimationFrame concentrera toutes les opérations DOM dans chaque trame, la complétez en une seule réécriture ou retour, et l'intervalle de temps de re-pain ou de retour suit de près la fréquence de rafraîchissement du navigateur.
2) Dans l'élément caché ou invisible, le demandiationframe ne re-draw ni ne reviendra, ce qui signifie qu'il y a moins de processeurs, de GPU et d'utilisation de la mémoire.
3) RequestanimationFrame est une API fournie par le navigateur spécifiquement pour l'animation.
En un mot, ce truc est élevé et ne sera pas coincé, et la fréquence d'images est automatiquement ajustée en fonction des différents navigateurs. Si vous ne comprenez pas ou ne comprend pas, cela n'a pas d'importance. Apprenons à l'utiliser en premier!
Comment utiliser DemanderAnimationFrame?
La manière d'utiliser est similaire à la minuterie settimeout.
var timer = requestanimationFrame (function () {console.log ('Timer Code');});});Le paramètre est une fonction de rappel, et la valeur de retour est un entier, qui est utilisé pour représenter le nombre de minuterie.
<! UAA -Compatible Content = IE = Edge> <Title> Document </ Title> <Script> Window.Onload = function () {var ainput = document.queerySelectollll (FORY), TIMER = NULL; () {Timer = requestanimationFrame (function say () {console.log (1); timer = requestanimationFrame (say);};}; aInput [1] .OnClick = function () {peut claniationframe (timer);}} < / script> </ head> <body> <Type d'entrée = Button Value = Open> <Type d'entrée = Button Value = Flosed> </ Body> </html>CanceLanimationFrame est utilisé pour éteindre la minuterie
Cette méthode doit être compatible:
Compatibilité simple:
Window.requestanImFrame = (function () {return window.requestanimationframe || window.webkitRequestanimationFrame || window.mozrequestanimation || func tion (callback) {window.setTimeout (callback, 1000/60);};});Si le navigateur ne connaît pas AnimationFrame, utilisez la compatibilité SetTimeout.
Utilisez 3 minuteries différentes (setTimeout, setInterval, DequeanimationFrame) pour obtenir un chargement d'une barre de progression
1. SetInterval Méthode: <! UAA -Chatation de contenu compatible = IE = <Titre> Document </ Title> <style> Div {Width: 0px; 30px / 40px 'Microsoft Yahei'; null, curWidth = 0, getStyle = function (obj, name, value) {if (obj.currentStyle) {return obj.currenttenle [name];} else {retcomputedStyle (obj, obj, false) [name];}}; Obtn. 1000) {obox. <p> <Type d'entrée = Button Value = Ready! Deuxièmement, la méthode settimeout <Script> window.onLoad = function () {var obtn = document.QuerySelector (input), obox = document.QuerySelector (div), timer = null, getsty le = function (obj, name, value) {if (obj. Currenstyle) {return obj.currentStyle [name];} else {return getCompuledStyle (obj, false) [name];}; ; INERHTML = PARSEINT (GetStyle (obox, 'Width')) / 10 + '%'; script> 3. Méthode de requestanimationframe <! UAA -Chatation de contenu compatible = IE = <Titre> Document </ Title> <style> Div {Width: 0px; 30px / 40px 'Microsoft Yahei'; null, curWidth = 0, getStyle = function (obj, name, value) {if (obj.currentStyle) {return obj.currenttenle [name];} else {retcomputedStyle (obj, obj, false) [name];}}; OBTN. .Offsetwidth + 10 + 'px'; e (go);} else {CanceLanimationFrame (timer);}});}} </ script> </ head> <body> <v> 0% </div> <p > <Type d'entrée = Valeur de bouton = Ready!