JavaScript с нуля

Плавная анимация с помощью requestAnimationFrame

Настало время перейти к моей любимой функции: requestAnimatonFrame. Эта функция создана для синхронизации кода с событием перерисовки содержимого браузера. Поясняю подробнее: в любой момент браузер занят обработкой миллиона различных элементов. Среди них: манипуляции с макетом, реакция на прокрутку страниц, прослушивание кликов мыши, отображение результатов нажатий клавиатуры, исполнение кода, загрузки ресурсов и т. д. Одновременно со всем этим он также перерисовывает экран со скоростью 60 кадров в секунду, ну или пытается это делать.

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

Запуск этой функции почти такой же, как в случае с setTimeout / setInterval:

let requestID = requestAnimationFrame(someFunction);

Единственное заметное отличие состоит в том, что мы не задаем значение продолжительности. Это значение вычисляется автоматически в зависимости от: текущей скорости обновления кадров, активна ли текущая вкладка или нет, работает ли устройство от батареи или сети и многих других факторов, выходящих далеко за пределы нашего контроля и понимания.

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

function animationLoop() {

// код, отвечающий за анимацию

requestAnimationFrame(animationLoop)

}

// Начать выполнение цикла анимации!

animationLoop();

Обратите внимание, что наша функция requestAnimationFrame определяет выполнение вызова функции animationLoop каждый раз, когда браузер производит обновление. Выглядит это так, как будто функция requestAnaimationFrame вызывает animationLoop напрямую, что не совсем так. И это вовсе не ошибка в коде. Несмотря на то что такой вид циклической зависимости на практике гарантированно привел бы к зависанию браузера, реализация requestAnimationFrame этого избегает. Наоборот, она обеспечивает вызов animationLoop именно такое число раз, чтобы гарантированно отобразить плавную и текущую анимацию. При этом не возникает проблем с функционированием остальных приложений.

Чтобы узнать подробнее о функции requestAnimationFrame и ее основном использовании для создания крутых анимаций, ознакомьтесь со статьей «Анимации в JavaScript» (https://www.kirupa.com/html5/animating_in_code_using_javascript.htm). В этом разделе также более глубоко освещена тема использования requestAnimationFrame и рассмотрены аспекты, не затронутые в текущей главе.

КОРОТКО О ГЛАВНОМ

Если вы считаете, что таймеры применяются в более узкой сфере, чем такие важные элементы, как инструкции if…else и циклы, пройденные нами ранее, то вы, скорее всего, правы. Вы можете создать множество прекрасных приложений, не прибегая к использованию setTimeout, setInterval или requestAnimationFrame. Тем не менее это не отменяет того, что знать их обязательно. Однажды наступит тот час, когда вам потребуется отложить выполнения кода, продолжительное выполнение цикла или создать приятную анимацию с помощью JavaScript. И когда этот момент наступит, вы будете готовы! Ну или по крайней мере будете знать, что гуглить.

Чтобы увидеть, как применяются эти функции-таймеры в рабочей среде, ознакомьтесь с приведенными ниже статьями и примерами, которые помогут лучше усвоить материал:

• Создание анимаций с помощью requestAnimationFrame (http://bit.ly/kirupaAnimationsJS).

• Создание симпатичного слайдера контента (http://bit.ly/sliderTutorial).

• Создание аналоговых часов (http://bit.ly/kirupaAnalogClock).

• Генератор припадка (http://bit.ly/kirupaSeizureGenerator).(Спойлер: анимация на этом сайте бешено мерцает.)

Я уже неоднократно отмечал, что JavaScript может вызвать ступор, в особенности когда дело доходит до таймеров. Если у вас возникнут сложности, я и другие опытные разработчики с радостью вам поможем. Обращайтесь на форум https://forum.kirupa.com, и мы выведем вас из ступора.