JavaScript
requestAnimationFrame

Angular 2 AngularJS ASP.NET CSS HTML jQuery Node.js PHP React Regular Expressions
Sök…


Syntax

  • windows.requestAnimationFrame ( återuppringning );
  • windows.webkitRequestAnimationFrame ( callback );
  • windows.mozRequestAnimationFrame ( återuppringning );

parametrar

Parameter detaljer
ring tillbaka "En parameter som anger en funktion att ringa när det är dags att uppdatera din animering för nästa ommålning." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Anmärkningar

När det gäller att animera DOM-element flytande, är vi begränsade till följande CSS-övergångar:

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

Men det är ingen garanti för att använda dessa som dina animationer blir flytande, eftersom det gör att webbläsaren för att starta nya paint oavsett vad som händer. I grund och botten är paint ineffektiva och din animering ser "janky" ut eftersom ramarna per sekund (FPS) lider.

För att garantera smidiga DOM-animationer som möjligt, måste requestAnimationFrame användas tillsammans med ovanstående CSS-övergångar.

Anledningen till att detta fungerar beror på att API: requestAnimationFrame låter webbläsaren veta att du vill att en animering ska hända vid nästa paint , i motsats till att avbryta vad som händer för att tvinga in en ny färgcykel när en icke-RAF-animation kallas .

referenser URL
Vad är jank? http://jankfree.org/
Högpresterande animationer http://www.html5rocks.com/sv/tutorials/speed/high-performance-animations/ .
JÄRNVÄG https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en
Analysera kritisk återgivningsväg https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Rendering Performance https://developers.google.com/web/fundamentals/performance/rendering/?hl=en
Analysera Paint Times https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en
Identifiera färgflaskhalsar https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en

Använd requestAnimationFrame för att bleka i elementet

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

Avbryter en animering

För att avbryta ett samtal till requestAnimationFrame , behöver du den id som den returnerade från när den senast ringdes. Det här är den parameter du använder för cancelAnimationFrame . Följande exempel startar en hypotetisk animering och pausar sedan den efter en sekund. 

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

Håller kompatibilitet

Naturligtvis, precis som de flesta saker i webbläsarens JavaScript, kan du bara inte räkna med det faktum att allt kommer att vara detsamma överallt. I det här fallet kan requestAnimationFrame ha ett prefix på vissa plattformar och namnges annorlunda, till exempel webkitRequestAnimationFrame . Lyckligtvis finns det ett riktigt enkelt sätt att gruppera alla kända skillnader som kan existera till en funktion: 

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

Observera att det sista alternativet (som fylls i när inget befintligt stöd hittades) inte kommer att returnera ett id som ska användas i cancelAnimationFrame . Det finns emellertid en effektiv polyfyll som skrevs som fixar detta.



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow