JavaScript => requestAnimationFrame

Синтаксис

window.requestAnimationFrame ( обратный вызов );
window.webkitRequestAnimationFrame ( обратный вызов );
window.mozRequestAnimationFrame ( обратный вызов );

параметры

параметр	подробности
Перезвоните	«Параметр, указывающий функцию для вызова, когда пришло время обновить анимацию для следующей перерисовки». ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)

замечания

Когда дело доходит до анимации элементов DOM, мы ограничены следующими переходами CSS:

POSITION - transform: translate (npx, npx);
SCALE - transform: scale(n) ;
ВРАЩЕНИЕ - transform: rotate(ndeg);
OPACITY - opacity: 0;

Однако использование этих функций не гарантирует, что ваши анимации будут текучими, потому что это заставляет браузер запускать новые циклы paint , независимо от того, что еще происходит. В основном, paint сделана неэффективно, и ваша анимация выглядит «janky», потому что страдает количество кадров в секунду (FPS).

Чтобы гарантировать плавные DOM-анимации, requestAnimationFrame необходимо использовать в сочетании с вышеперечисленными переходами CSS.

Причина этого в том, что API requestAnimationFrame позволяет браузеру знать, что вы хотите, чтобы анимация произошла в следующем цикле paint , в отличие от прерывания того, что происходит, чтобы заставить новый цикл рисования при вызове анимации без RAF .

Рекомендации	URL
Что такое jank?	http://jankfree.org/
Высокопроизводительные анимации	http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ .
RAIL	https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en
Анализ критического пути рендеринга	https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en
Производительность рендеринга	https://developers.google.com/web/fundamentals/performance/rendering/?hl=en
Анализ времени печати	https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en
Определение узких мест для красок	https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en

Использовать requestAnimationFrame для изменения элемента

Просмотреть jsFiddle : https://jsfiddle.net/HimmatChahal/jb5trg67/
Копировать + Вставить код ниже :

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

Отмена анимации

Чтобы отменить вызов requestAnimationFrame , вам нужно вернуть идентификатор с момента его последнего вызова. Это параметр, который вы используете для cancelAnimationFrame . Следующий пример запускает некоторую гипотетическую анимацию, затем приостанавливает ее через одну секунду.

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

Обеспечение совместимости

Конечно, как и большинство вещей в браузере JavaScript, вы просто не можете рассчитывать на то, что все будет одинаково везде. В этом случае requestAnimationFrame может иметь префикс на некоторых платформах именоваться по-разному, например webkitRequestAnimationFrame . К счастью, есть очень простой способ группировать все известные различия, которые могут существовать до 1 функции:

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

Обратите внимание, что последний параметр (который заполняется, когда никакой существующей поддержки не найден) не вернет идентификатор, который будет использоваться в cancelAnimationFrame . Существует, однако, эффективный полиполк, который был написан, который исправляет это.

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

JavaScript
requestAnimationFrame

Поиск…