Отличие анимации при использовании requestAnimationFrame и SetInterval

Анимация — это процесс изменения свойств элемента с течением времени. В JavaScript для этого можно использовать разные таймеры, но они сильно отличаются по своему поведению и эффективности.

setInterval

• Принцип работы: Запускает функцию повторно через заданный фиксированный интервал времени (в миллисекундах).

• Проблемы:

  • Несинхронизирован с отрисовкой: Он не знает, когда браузер готов перерисовать страницу. Это может привести к "конфликту" — функция пытается изменить стиль, пока браузер занят отрисовкой, из-за чего кадр пропускается, и анимация дергается.

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

// Пример с setInterval (НЕ РЕКОМЕНДУЕТСЯ для анимаций)
const intervalId = setInterval(() => {
	moveElementByOnePixel(); // Двигаем элемент
	if (animationIsComplete) clearInterval(intervalId);
}, 16); // ~60fps (1000ms / 60 ≈ 16ms)

requestAnimationFrame (rAF)

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

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

  • Синхронизация: Гарантирует, что ваш код анимации выполняется в идеальный момент для обновления кадра, обеспечивая максимальную плавность.

  • Эффективность: Браузер объединяет все requestAnimationFrame-вызовы в одном кадре, а также приостанавливает анимацию на неактивных вкладках.

  • Точность: Передает в функцию-колбэк метку времени (timestamp), что позволяет точно рассчитывать анимацию, даже если частота кадров плавает.

// Пример с requestAnimationFrame (РЕКОМЕНДУЕМЫЙ способ)
function animate(timestamp) {
  // Высчитываем, насколько сдвинуть элемент на основе timestamp
  moveElementBasedOnTime(timestamp);

  if (animationIsComplete) return; // Останавливаем анимацию

  requestAnimationFrame(animate); // Запрашиваем следующий кадр
}

requestAnimationFrame(animate); // Запускаем анимацию

Вывод: Для создания плавных, производительных и ресурсоэффективных анимаций всегда используйте requestAnimationFrame. setInterval и setTimeout подходят для задач, не требующих точной синхронизации с отрисовкой (например, периодическая проверка состояния).