JavaScript => requestAnimationFrame

Sintassi

window.requestAnimationFrame ( callback );
window.webkitRequestAnimationFrame ( callback );
window.mozRequestAnimationFrame ( callback );

Parametri

Parametro	Dettagli
richiama	"Un parametro che specifica una funzione da chiamare quando è il momento di aggiornare l'animazione per il prossimo ridisegno." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Osservazioni

Quando si tratta di animare fluidamente gli elementi DOM, siamo limitati alle seguenti transizioni CSS:

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

Tuttavia, l'utilizzo di questi non garantisce che le tue animazioni siano fluide, perché fa sì che il browser avvii nuovi cicli di paint , indipendentemente da ciò che sta succedendo. In sostanza, paint sono fatti in modo inefficiente e l'animazione sembra "janky", perché i fotogrammi al secondo (FPS) soffre.

Per garantire animazioni DOM senza intoppi, requestAnimationFrame deve essere utilizzato in combinazione con le transizioni CSS precedenti.

Il motivo per cui questo funziona, è perché il requestAnimationFrame API consente il browser sa che si desidera un'animazione per accadere alla prossima paint ciclo, al contrario di interrompere quello che sta succedendo per imporre un nuovo ciclo di verniciatura quando un'animazione non RAF si chiama.

Riferimenti	URL
Cosa è jank?	http://jankfree.org/
Animazioni ad alte prestazioni	http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ .
ROTAIA	https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en
Analizzando il percorso di rendering critico	https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Prestazioni del rendering	https://developers.google.com/web/fundamentals/performance/rendering/?hl=en
Analizzando i tempi di pittura	https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en
Identificazione dei colli di bottiglia della vernice	https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en

Usa requestAnimationFrame per dissolvere l'elemento

Visualizza jsFiddle : https://jsfiddle.net/HimmatChahal/jb5trg67/
Copia + Codice inseribile di seguito :

<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>

Annullamento di un'animazione

Per annullare una chiamata a requestAnimationFrame , è necessario l'ID restituito dall'ultima chiamata. Questo è il parametro che usi per cancelAnimationFrame . L'esempio seguente avvia un'animazione ipotetica e poi la interrompe dopo un secondo.

// 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);

Mantenere la compatibilità

Naturalmente, proprio come la maggior parte delle cose nel browser JavaScript, non puoi contare sul fatto che tutto sarà uguale ovunque. In questo caso, requestAnimationFrame potrebbe avere un prefisso su alcune piattaforme e avere un nome diverso, come webkitRequestAnimationFrame . Fortunatamente, c'è un modo davvero semplice per raggruppare tutte le differenze note che potrebbero esistere fino a 1 funzione:

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

Si noti che l'ultima opzione (che si riempie quando non è stato trovato alcun supporto esistente) non restituirà un ID da utilizzare in cancelAnimationFrame . C'è, tuttavia, un polyfill efficace che è stato scritto che risolve questo problema.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

JavaScript
requestAnimationFrame

Ricerca…