Eingeführt
Timer waren schon immer die Kerntechnologie der JavaScript -Animation. Der Schlüssel zum Schreiben einer Animationsschleife besteht darin, zu wissen, wie lange die Verzögerung angemessen ist. Einerseits muss das Schleifenintervall kurz genug sein, damit verschiedene Animationseffekte glatt und glatt erscheinen können. Andererseits muss das Schleifenintervall lang genug sein, damit der Browser Änderungen umsetzen kann.
Die Aktualisierungsfrequenz der meisten Computermonitore beträgt 60 Hz, was ungefähr 60 -mal pro Sekunde entspricht. Die meisten Browser beschränken den Neubau -Betrieb so, dass sie die Neuausziehfrequenz des Monitors nicht überschreitet, denn selbst wenn er diese Häufigkeit überschreitet, verbessert sich die Benutzererfahrung nicht. Daher beträgt das optimale Schleifenintervall für die glatteste Animation 1000 ms/60, was ungefähr 16,6 ms entspricht
Und das Problem mit SetTimeout und SetInterval ist, dass sie nicht genau sind. Ihr intrinsischer laufender Mechanismus bestimmt, dass die Zeitintervallparameter tatsächlich nur angeben, wie lange Animationscode zum Browser UI -Thread -Warteschlangen hinzugefügt werden soll, um auf die Ausführung zu warten. Wenn der Warteschlange andere Aufgaben hinzugefügt wurden, muss der Animationscode warten, bis die vorherigen Aufgaben erledigt sind, bevor sie ausgeführt werden.
RequestAnimationFrame verwendet Systemzeitintervalle, um die beste Zeichnungseffizienz aufrechtzuerhalten, und wird aufgrund der kurzen Intervallzeit, die den Overhead erhöht, nicht überzogen. Die Verwendung von Animationen wird auch nicht reibungslos geblieben, da die Intervallzeit zu lang ist, sodass verschiedene Webanimationseffekte einen einheitlichen Aktualisierungsmechanismus haben können, wodurch Systemressourcen sparen, die Systemleistung verbessert und visuelle Effekte verbessern können
Merkmale
【1】 Der RequestAnimationFrame konzentriert alle DOM -Operationen in jedem Frame, in einem einzelnen Repaint oder Reflow, und das Zeitintervall von Repaint oder Reflow folgt eng von der Aktualisierungsfrequenz des Browsers
【2】 In verborgenen oder unsichtbaren Elementen wird der RequestAnimationFrame nicht neu gestrichen oder reflowiert, was natürlich weniger CPU-, GPU- und Speicherverwendung bedeutet
【3】 RequestAnimationFrame ist eine API, die vom Browser speziell zur Animation bereitgestellt wird. Beim Ausführen optimiert der Browser automatisch den Anruf der Methode. Wenn die Seite nicht aktiviert ist, pausiert die Animation automatisch und speichert CPU -Overhead effektiv
verwenden
Die Verwendung von RequestAnimationFrame ist SetTimeOut sehr ähnlich, außer dass das Zeitintervall nicht festgelegt werden muss. Der RequestAnimationFrame verwendet eine Rückruffunktion als Parameter, die vor dem Browser -Repainten aufgerufen wird. Es gibt eine Ganzzahl zurück, die die Nummer des Timers repräsentiert, die an CancelAnimationFrame übergeben werden kann, um die Ausführung dieser Funktion zu stornieren
RequestID = RequestAnimationFrame (Callback); // Konsolenausgänge 1 und 0var Timer = RequestAnimationFrame (function () {console.log (0);}); console.log (Timer); // 1 CancelanimationFrame -Methode wird verwendet, um den Timer zu stornieren // Konsole gibt nichts var Timer = RequestAnimationFrame (function () {console.log (0);}); CancelAnimationFrame (Timer);Sie können den Rückgabewert auch verwenden, um ihn direkt zu stornieren
var Timer = RequestAnimationFrame (function () {console.log (0);}); CancelAnimationFrame (1);kompatibel
IE9-Browser unterstützt diese Methode nicht. Sie können SetTimeout für die Kompatibilität verwenden
if (! window.requestanimationFrame) {var lastTime = 0; window.requestanimationFrame = Funktion (Rückruf) {var currime = new Date (). timetocall);}, timetocall); lastTime = currtime + timetocall; return id;}} if (! window.cancelanimationFrame) {window.cancelanimationFrame = function (id) {clearTimeout (id);};}Anwendung
Verwenden Sie nun die drei Methoden von SetInterval, SetTimeout und RequestAnimationFrame, um einen einfachen Systemeffekt zu erstellen.
【1】 setInterval
<div id = "mydiv" style = "Hintergrundfarbe: Lightblue; Breite: 0; Höhe: 20px; Zeilenhöhe: 20px;"> 0%</div> <button id = "btn"> run </button> <Crtecricte> var timer; btn.onclick = function () {clearinterval (timer); setInterval (function () {if (parseInt (mydiv.style.width) <500) {mydiv.style.width = parseInt (mydiv.style.width) + 5 + 'Px'; } else {ClearInterval (Timer);}}, 16);} </script>【2】 setTimeout
<div id = "mydiv" style = "Hintergrundfarbe: Lightblue; Breite: 0; Höhe: 20px; Zeilenhöhe: 20px;"> 0%</div> <button id = "btn"> run </button> <cript> var timer; btn.onclick = function () {cleartimeout (Timer); fn () {if (parseInt (mydiv.style.width) <500) {mydiv.style.width = parseInt (mydiv.style.width) + 5 + 'px'; setTimeout (fn, 16);} else {ClearTimeout (Timer);}}, 16);} </script>【3】 RequestAnimationFrame
<div id = "mydiv" style = "Hintergrundfarbe: Lightblue; Breite: 0; Höhe: 20px; Zeilenhöhe: 20px;"> 0%</div> <button id = "btn"> run </button> <script> var timer; btn.onclick = function () {mydiv.style.width = '0' 0 '; RequestAnimationFrame (Funktion fn () {if (parseInt (mydiv.style.width) <500) {mydiv.Style.width = parseInt (mydiv.style.width) + 5 + 'px'; RequestAnimationFrame (fn);} else {CRANDANIMATIONFRAME (Timer);}});} </script>Okay, der Code ist hier, um die dritte Timer -Anwendung in der BOM -Serie (Clock, Countdown, Stoppuhr und Wecker) einzuführen.
Das obige ist der zweite Timer RequestAnimationFrame der BOM -Serie, das Ihnen vom Herausgeber vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!