JavaScript => requestAnimationFrame

Syntax

window.requestAnimationFrame ( Rückruf );
window.webkitRequestAnimationFrame ( Rückruf );
window.mozRequestAnimationFrame ( Rückruf );

Parameter

Parameter	Einzelheiten
Ruf zurück	"Ein Parameter, der eine Funktion angibt, die aufgerufen werden soll, wenn die Animation für die nächste Aktualisierung aktualisiert werden soll." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Bemerkungen

Wenn es darum geht, DOM-Elemente flüssig zu animieren, beschränken wir uns auf die folgenden CSS-Übergänge:

POSITION - transform: translate (npx, npx);
SCALE - transform: scale(n) ;
ROTATION - transform: rotate(ndeg);
OPACITY - opacity: 0;

Die Verwendung dieser Optionen ist jedoch keine Garantie dafür, dass Ihre Animationen flüssig sind, da der Browser neue paint startet, unabhängig davon, was sonst noch passiert. Grundsätzlich wird paint ineffizient gemacht, und Ihre Animation wirkt "janky", da die Frames pro Sekunde (FPS) darunter leiden.

Um eine möglichst glatte DOM-Animation zu gewährleisten, muss requestAnimationFrame in Verbindung mit den obigen CSS-Übergängen verwendet werden.

Der Grund , dies funktioniert, ist , weil die requestAnimationFrame API des Browser läßt wissen , dass Sie eine Animation auf dem nächsten passieren sollen paint Zyklus, im Gegensatz zu unterbrechen , was los ist einen neuen Anstrich Zyklus zu erzwingen , wenn eine Nicht-RAF - Animation genannt wird.

Verweise	URL
Was ist Jank?	http://jankfree.org/
Hochleistungs-Animationen	http://www.html5rocks.com/de/tutorials/speed/high-performance-animations/ .
SCHIENE	https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=de
Analysieren des kritischen Wiedergabepfads	https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=de
Rendering-Leistung	https://developers.google.com/web/fundamentals/performance/rendering/?hl=de
Lackzeiten analysieren	https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevToolss-Continuous-Painting-Mode?hl=de
Farbengpässe erkennen	https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=de

Verwenden Sie requestAnimationFrame, um das Element einzublenden

JsFiddle anzeigen : https://jsfiddle.net/HimmatChahal/jb5trg67/
Kopieren + Einfügbarer Code unten :

<html>
    <body>
        <h1>This will fade in at 60 frames per second (or as close to possible as your hardware allows)</h1>
        
        <script>
            // Fade in over 2000 ms = 2 seconds.
            var FADE_DURATION = 2.0 * 1000; 
            
            // -1 is simply a flag to indicate if we are rendering the very 1st frame
            var startTime=-1.0; 
            
            // Function to render current frame (whatever frame that may be)
            function render(currTime) { 
                var head1 = document.getElementsByTagName('h1')[0]; 
            
                // How opaque should head1 be?  Its fade started at currTime=0.
                // Over FADE_DURATION ms, opacity goes from 0 to 1
                var opacity = (currTime/FADE_DURATION);
                head1.style.opacity = opacity;
            }
            
            // Function to 
            function eachFrame() {
                // Time that animation has been running (in ms)
                // Uncomment the console.log function to view how quickly 
                // the timeRunning updates its value (may affect performance)
                var timeRunning = (new Date()).getTime() - startTime;
                //console.log('var timeRunning = '+timeRunning+'ms');
                if (startTime < 0) {
                    // This branch: executes for the first frame only.
                    // it sets the startTime, then renders at currTime = 0.0
                    startTime = (new Date()).getTime();
                    render(0.0);
                } else if (timeRunning < FADE_DURATION) {
                    // This branch: renders every frame, other than the 1st frame,
                    // with the new timeRunning value.
                    render(timeRunning);
                } else {
                    return;
                }
            
                // Now we're done rendering one frame.
                // So we make a request to the browser to execute the next
                // animation frame, and the browser optimizes the rest.
                // This happens very rapidly, as you can see in the console.log();
                window.requestAnimationFrame(eachFrame);
            };
            
            // start the animation
            window.requestAnimationFrame(eachFrame);    
        </script>
    </body>
</html>

Eine Animation abbrechen

Um einen Aufruf von requestAnimationFrame , benötigen Sie die ID, die er beim letzten Aufruf zurückgegeben hat. Dies ist der Parameter, den Sie für cancelAnimationFrame . Im folgenden Beispiel wird eine hypothetische Animation gestartet und nach einer Sekunde angehalten.

// stores the id returned from each call to requestAnimationFrame
var requestId;

// draw something
function draw(timestamp) {
    // do some animation
    // request next frame
    start();
}

// pauses the animation
function pause() {
    // pass in the id returned from the last call to requestAnimationFrame
    cancelAnimationFrame(requestId);
}

// begin the animation
function start() {
    // store the id returned from requestAnimationFrame
    requestId = requestAnimationFrame(draw);
}

// begin now
start();

// after a second, pause the animation
setTimeout(pause,1000);

Kompatibilität beibehalten

Natürlich können Sie, genau wie die meisten Dinge in Browser-JavaScript, einfach nicht darauf zählen, dass alles überall gleich ist. In diesem Fall kann requestAnimationFrame auf einigen Plattformen ein Präfix haben und anders benannt werden, beispielsweise webkitRequestAnimationFrame . Glücklicherweise gibt es eine sehr einfache Möglichkeit, alle bekannten Unterschiede, die möglicherweise vorhanden sind, auf eine Funktion zu gruppieren:

window.requestAnimationFrame = (function(){
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60);
        };
})();

Beachten Sie, dass die letzte Option (die ausgefüllt wird, wenn keine vorhandene Unterstützung gefunden wurde) keine ID cancelAnimationFrame , die in cancelAnimationFrame . Es wurde jedoch ein effizienter Polyfill geschrieben, der dies behebt.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

JavaScript
requestAnimationFrame

Suche…