Анимации на сайте — это как специи в блюде: без них пресно, а с ними — вкусно и аппетитно. Но чтобы анимация радовала глаз, а не раздражала, нужно правильно её готовить. В этой статье разберём, как использовать requestAnimationFrame для создания плавных и производительных анимаций. Вы узнаете, почему этот метод лучше старых подходов, и получите готовые примеры кода.

Digital-студия WNDER

Что такое requestAnimationFrame и зачем он нужен

requestAnimationFrame (часто сокращают до rAF) — это встроенный в браузер метод, который говорит: «Эй, браузер, перед следующей перерисовкой экрана выполни мою функцию». Он синхронизирует вашу анимацию с частотой обновления монитора (обычно 60 раз в секунду). В результате анимация выглядит плавной и не нагружает процессор лишней работой.

Раньше для анимаций использовали setInterval или setTimeout. Но у них есть проблема: они не знают, когда браузер готов перерисовать страницу. Функция может сработать в неподходящий момент, и анимация будет дёргаться. requestAnimationFrame решает эту проблему.

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

Всё просто: вы вызываете requestAnimationFrame(callback), передаёте туда функцию, которую нужно выполнить перед следующей перерисовкой. Браузер сам решает, когда это сделать, обычно с частотой 60 Гц. Функция получает один аргумент — текущее время в миллисекундах (timestamp). Это удобно для расчёта прогресса анимации.

Вот минимальный пример:

function animate(timestamp) {
  // код анимации
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

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

Сравнение с setInterval и setTimeout

Давайте посмотрим, чем requestAnimationFrame лучше старых методов.

Характеристика requestAnimationFrame setInterval / setTimeout
Синхронизация с перерисовкой Да, всегда Нет
Плавность Высокая Может дёргаться
Нагрузка на процессор Минимальная Может быть избыточной
Работа в фоновых вкладках Приостанавливается Продолжается

Как видите, requestAnimationFrame выигрывает по всем пунктам. Особенно важно, что он автоматически останавливается, когда вкладка неактивна — это экономит батарею и ресурсы.

Правило: Всегда используйте requestAnimationFrame для анимаций, которые изменяют стили или положение элементов на экране. Это золотой стандарт производительности.

Практический пример: плавное перемещение квадрата

Давайте сделаем простую анимацию: квадрат будет двигаться слева направо. Сначала HTML:

<div id="box" style="width: 50px; height: 50px; background: red; position: absolute; left: 0; top: 50px;"></div>

Теперь JavaScript с requestAnimationFrame:

const box = document.getElementById('box');
let start = null;
const duration = 2000; // 2 секунды
const distance = 300; // пикселей

function step(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  const offset = Math.min(progress / duration * distance, distance);
  box.style.left = offset + 'px';
  if (progress < duration) {
    requestAnimationFrame(step);
  }
}
requestAnimationFrame(step);

Здесь мы вычисляем прогресс анимации и перемещаем квадрат. Когда время выходит, анимация останавливается. Всё просто и эффективно.

Советы и лайфхаки

  • Используйте timestamp для расчётов. Не полагайтесь на фиксированные шаги, так как частота кадров может меняться.
  • Отменяйте анимацию при необходимости. requestAnimationFrame возвращает id, который можно передать в cancelAnimationFrame.
  • Избегайте тяжёлых вычислений в колбэке. Всё, что можно вынести за пределы цикла, выносите.
  • Комбинируйте с CSS-транзишенами для простых случаев. Но для сложных сценариев rAF незаменим.

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

Заключение

requestAnimationFrame — это мощный и простой инструмент для создания плавных анимаций в браузере. Он синхронизируется с перерисовкой экрана, экономит ресурсы и делает код чище. Попробуйте заменить свои setInterval-анимации на rAF — результат вас приятно удивит. Удачи в экспериментах!

Студия WNDER