Например, setTimeout VS. запрос АнимацияFrame

ТрадицияjsанимацияРеализация общего использованияsetTimeout/setIntervalДождитесь запланированного выполненияанимацияоперация обновления,Но есть некоторые проблемы при использовании этого метода.

1. Проблема с интервалом кадров анимации Частота обновления большинства мониторов составляет 16,7 мс. Если интервал setTimeout меньше этого значения, возникнет проблема, заключающаяся в том, что нарисованные кадры не могут отображаться на мониторе, как будто они проглатываются. Кроме того, частоты обновления каждого дисплея разные, что также не позволяет набору кодов адаптироваться к разным частотам, что затрудняет оптимизацию эффекта анимации.
2. Продолжайте выполнение, когда страница не видна, что приводит к потере ресурсов и мощности.

И requestAnimationFrame может решить эти проблемы:

1. Браузер автоматически устанавливает интервал между каждым кадром в зависимости от текущей частоты обновления монитора. Например, если на дисплее отображается 10 мс, интервал составит 10 мс, если 16,7 мс, интервал автоматически составит 16,7 мс;
2. Оптимизация браузера анимационный рисунок Браузер может объединить операцию анимации requestAnimationFrame, CSS-анимацию, CSS-преобразование и другие эффекты анимации в один цикл рендеринга. А когда страница не видна, вы можете не выполнять рендеринг анимации (кажется, она приостанавливает анимацию) для экономии ресурсов и энергии.

2. Используйте requestAnimationFrame.

С точки зрения использования кода requestAnimationFrame и setTimeout очень похожи.

    function renderFrame() { 
   
        // do something
    }

    // setTimeout / setInterval
    var handler = setTimeout(renderFrame, 100);

    // requestAnimationFrame
    var hanlder = requestAnimationFrame(renderFrame);

Как видно из вышеизложенного, разница между ними заключается в том, указано ли значение интервала.

3. Совместимость с браузером

В настоящее время некоторые браузеры более ранних версий не поддерживают requestAnimationFrame. В этом случае для совместимости вам все равно необходимо использовать setTimeout/setInterval для реализации анимации. Кроме того, названия requestFrameAnimation в браузерах разных производителей тоже различаются, поэтому для достижения совместимости можно использовать самый простой метод, представленный ниже.

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

Если вы хотите быть в большей безопасности, вы можете обратиться к пакету Эрика Мёллера, специалиста по браузеру Opera.

(function() { var lastTime = 0; var vendors = ['webkit', 'moz']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { 
      window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) { clearTimeout(id); }; }());

Здесь код определяет, использовать ли задержку 4 мс или 16 мс, чтобы лучше всего соответствовать 60 кадрам в секунду. Также поддерживается метод отмены.

Ссылки

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
2. http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/

Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Данный сайт лишь предоставляет услуги по хранению информации, не имеет никаких прав собственности и не несет соответствующей юридической ответственности. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.

Издатель: Full stack программист и руководитель стека, укажите источник для перепечатки: https://javaforall.cn/181811.html Исходная ссылка: https://javaforall.cn