Vor dem Auftauchen von RequestAnimationFrame verwenden wir im Allgemeinen SetTimeout und SetInterval. Warum fügt HTML5 einen neuen RequestArimation -Rahmen hinzu?
Vorteile und Eigenschaften:1) RequestAnimationFrame konzentriert alle DOM -Operationen in jedem Frame, erledigt ihn in einem Umschreiben oder Rückkehr, und das Zeitintervall von Re -Malting oder Rückgabe folgt genau der Aktualisierungsfrequenz des Browsers.
2) Im verborgenen oder unsichtbaren Element wird der RequestAnimationFrame nicht wiedergegeben oder zurückgegeben, was bedeutet, dass weniger CPUs, GPUs und Speicher verwendet werden.
3) RequestAnimationFrame ist eine API, die vom Browser speziell für die Animation bereitgestellt wird.
Mit einem Wort ist dieses Zeug hoch und wird nicht festsitzen, und die Bildrate wird automatisch nach verschiedenen Browsern eingestellt. Wenn Sie nicht verstehen oder verstehen, spielt dies keine Rolle. Lernen wir zuerst, es zu benutzen!
Wie benutze ich RequestAnimationFrame?
Die Verwendung der Nutzung ähnelt dem Timer -SetTimeout.
var Timer = RequestAnimationFrame (function () {console.log ('Timer Code');});});Der Parameter ist eine Rückruffunktion, und der Rückgabewert ist eine Ganzzahl, die zur Darstellung der Anzahl des Timers verwendet wird.
<! uaa -Compatible content = IE = Edge> <title> document </title> <script> Fenster.onload = Funktion () {var ainput = document.queerySelectollll (Eingabe), Timer = null; () {Timer = RequestAnimationFrame (Funktion say () {console.log (1); Timer = RequestAnimationFrame (Say);};}; Ainput [1] .Onclick = function () {CanclanimationFrame (Timer);}} < /script> </head> <body> <Eingabe type = button value = open> <Eingabe type = button value = geschlossen> </body> </html>CancelanimationFrame wird verwendet, um den Timer auszuschalten
Diese Methode muss kompatibel sein:
Einfache Kompatibilität:
Window.Requestanimframe = (function () {return window.requestanimationFrame || window.webkitRequestanimationFrame || Fenster.MoZRequestAration || Funktion (Rückruf) {Window.Settimeout (Rückruf, 1000 /60);};});Wenn der Browser den AnimationFrame nicht kennt, verwenden Sie SetTimeout -Kompatibilität.
Verwenden Sie 3 verschiedene Timer (setTimeout, setInterval, RequestAnimationFrame), um eine Belastung einer Fortschrittsleiste zu erreichen
1. SetInterval -Methode: <! uaa-Compatible Content = IE = Edge> <title> Dokument </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> <Eingabetyp = Button Value = Ready! Zweitens, SetTimeout -Methode <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 computedStyle (obj, false) [Name];}; ; INERHTML = PARSEINT (GetStyle (Obox, 'Breite') /10 + '%'; Skript> 3.. RequestAnimationFrame -Methode <! uaa-Compatible Content = IE = Edge> <title> Dokument </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'; > <Eingabetyp = Button Value = Ready!