JavaScript => requestAnimationFrame

Składnia

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

Parametry

Parametr	Detale
oddzwonić	„Parametr określający funkcję, która ma zostać wywołana, gdy nadejdzie czas aktualizacji animacji do następnego odświeżenia”. ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

Uwagi

Jeśli chodzi o płynne animowanie elementów DOM, ograniczamy się do następujących przejść CSS:

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

Jednak korzystanie z nich nie gwarantuje płynności animacji, ponieważ powoduje, że przeglądarka rozpoczyna nowe cykle paint , niezależnie od tego, co się dzieje. Zasadniczo paint są wykonywane nieefektywnie, a twoja animacja wygląda „szarpiąco”, ponieważ cierpi na to liczba klatek na sekundę (FPS).

Aby zagwarantować płynne animacje DOM, requestAnimationFrame musi być używany w połączeniu z powyższymi przejściami CSS.

Powodem tego jest fakt, że API requestAnimationFrame przeglądarkę, że chcesz, aby animacja miała się odbyć w następnym cyklu paint , w przeciwieństwie do przerywania tego, co się dzieje, aby wymusić nowy cykl malowania, gdy wywoływana jest animacja inna niż RAF .

Bibliografia	URL
Co to jest jank?	http://jankfree.org/
Animacje o wysokiej wydajności	http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ .
SZYNA	https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en
Analiza ścieżki renderowania krytycznego	https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=pl
Wydajność renderowania	https://developers.google.com/web/fundamentals/performance/rendering/?hl=pl
Analizowanie czasów malowania	https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en
Identyfikacja wąskich gardeł w farbie	https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=pl

Użyj metody requestAnimationFrame, aby wprowadzić element

Zobacz jsFiddle : https://jsfiddle.net/HimmatChahal/jb5trg67/
Skopiuj + Kod do wklejenia poniżej :

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

Anulowanie animacji

Aby anulować połączenie do requestAnimationFrame , potrzebujesz identyfikatora, z którego został zwrócony podczas ostatniego połączenia. Tego parametru używasz dla cancelAnimationFrame . Poniższy przykład uruchamia hipotetyczną animację, a następnie zatrzymuje ją po jednej sekundzie.

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

Zachowanie kompatybilności

Oczywiście, podobnie jak większość elementów w przeglądarce JavaScript, po prostu nie możesz liczyć na to, że wszystko będzie takie samo wszędzie. W takim przypadku requestAnimationFrame może mieć prefiks na niektórych platformach i ma inne nazwy, takie jak webkitRequestAnimationFrame . Na szczęście istnieje naprawdę łatwy sposób na grupowanie wszystkich znanych różnic, które mogą istnieć, do 1 funkcji:

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

Zauważ, że ostatnia opcja (która wypełnia się, gdy nie znaleziono istniejącej obsługi) nie zwróci identyfikatora do użycia w cancelAnimationFrame . Istnieje jednak skuteczny polifill, który został napisany, który to rozwiązuje.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

JavaScript
requestAnimationFrame

Szukaj…