In Browser-Animationsprogrammen verwenden wir normalerweise einen Timer, um das Zielobjekt alle paar Millisekunden zu bewegen, damit es sich bewegt. Die gute Nachricht ist nun, dass Browser-Entwickler entschieden haben: Hey, warum stellen wir nicht eine solche API im Browser bereit, damit wir ihre Animationen für Benutzer optimieren können? Daher ist diese Funktion requestAnimationFrame() eine API für Animationseffekte. Sie können sie für Stiländerungen im DOM, in der Canvas-Animation oder in WebGL verwenden.
Der Browser kann parallele Animationsaktionen optimieren, die Aktionssequenz sinnvoller neu anordnen und Aktionen abschließen, die in einem Rendering-Zyklus kombiniert werden können, wodurch ein flüssigerer Animationseffekt erzielt wird. Beispielsweise kann über requestAnimationFrame() eine JS-Animation gleichzeitig mit einer CSS-Animation/Transformation oder einer SVG-SMIL-Animation erfolgen. Wenn Sie außerdem eine Animation in einem Browser-Tab ausführen, pausiert der Browser diese, wenn der Tab nicht sichtbar ist, was die Belastung der CPU und des Speichers verringert und Batteriestrom spart.
Verwendung von requestAnimationFrame // Shim-Ebene mit setTimeout fallbackwindow.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };} )();// Verwendung:// statt setInterval(render, 16) ....(Funktion animloop(){ requestAnimFrame(animloop); render();})();// platziere den rAF *vor* dem render(), um mit dem setTimeout-Fallback möglichst nahe an 60fps zu gelangen.Eine zuverlässigere Kapselung von requestAnimationFrame
Der Opera-Browsertechniker Erik Möller hat diese Funktion gekapselt, um sie besser mit verschiedenen Browsern kompatibel zu machen. Sie können diesen Artikel lesen, aber im Grunde entscheidet sein Code, ob eine Verzögerung von 4 ms oder 16 ms verwendet wird, um 60 fps optimal zu erreichen. Unten finden Sie diesen Code. Sie können ihn verwenden. Bitte beachten Sie jedoch, dass dieser Code Standardfunktionen verwendet und ich ihm Präfixe hinzugefügt habe, die mit verschiedenen Browser-Engines kompatibel sind.
(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;Lassen Sie mich den Effekt der Verwendung von requestAnimationFrame sehen
requestAnimationFrame-API window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date // die Unix-Zeit});Die Parameter in der Callback-Funktion können zeitlich übergeben werden.
Unterstützung verschiedener Browser für requestAnimationFrame
Google Chrome, Firefox und IE10+ implementieren diese Funktion. Auch wenn Ihr Browser sehr alt ist, kann die obige requestAnimationFrame-Kapselung diese Methode unter IE8/9 fehlerfrei machen.