requestAnimationFrame

1️⃣ Как кратко ответить

requestAnimationFrame — это метод браузера, который оптимизирует анимации, вызывая функцию для обновления экрана перед следующим перерисовыванием. Он обеспечивает плавность анимации, синхронизируя её с частотой обновления дисплея.

2️⃣ Подробное объяснение темы

requestAnimationFrame — это метод, предоставляемый браузерами для выполнения анимаций более эффективно. Он позволяет разработчикам синхронизировать обновления анимации с частотой обновления экрана, что делает анимации более плавными и снижает нагрузку на процессор.

Зачем это нужно

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

Как это работает

Когда вы вызываете requestAnimationFrame, вы передаете ему функцию, которая будет выполнена перед следующим перерисовыванием экрана. Браузер сам решает, когда именно вызвать эту функцию, чтобы обеспечить максимальную плавность анимации.

Пример использования

let start = null;
​
// Функция, которая будет анимировать элемент
function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
​
  // Изменяем позицию элемента в зависимости от времени
  const element = document.getElementById('animatedElement');
  element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';
​
  // Если анимация не завершена, продолжаем
  if (progress < 2000) {
    requestAnimationFrame(step);
  }
}
​
// Запуск анимации
requestAnimationFrame(step);

Объяснение кода

• let start = null;: Инициализируем переменную start, которая будет хранить время начала анимации.
• function step(timestamp) {...}: Определяем функцию step, которая будет вызываться для обновления анимации. timestamp — это время, прошедшее с начала загрузки страницы, передаваемое браузером.
• if (!start) start = timestamp;: Устанавливаем время начала анимации, если оно еще не задано.
• const progress = timestamp - start;: Вычисляем, сколько времени прошло с начала анимации.
• const element = document.getElementById('animatedElement');: Получаем элемент, который будем анимировать.
• element.style.transform = 'translateX(' + Math.min(progress / 10, 200) + 'px)';: Изменяем позицию элемента по оси X. Используем Math.min для ограничения движения до 200 пикселей.
• if (progress < 2000) { requestAnimationFrame(step); }: Если прошло меньше 2000 миллисекунд, продолжаем анимацию, вызывая requestAnimationFrame снова.

Преимущества

• Плавность: Анимации синхронизируются с частотой обновления экрана, что делает их более плавными.
• Эффективность: Браузер может оптимизировать перерисовку, снижая нагрузку на процессор.
• Автоматическая пауза: Анимации автоматически приостанавливаются, когда вкладка неактивна, что экономит ресурсы.

requestAnimationFrame — это стандартный инструмент для создания анимаций в современных веб-приложениях, который обеспечивает высокую производительность и плавность.