Анимация с помощью requestAnimationFrame

requestAnimationFrame (rAF) планирует обратный вызов перед следующим перерисовыванием браузера, синхронизируя анимацию с частотой обновления экрана (обычно 60 FPS). В отличие от setInterval, rAF приостанавливается, когда вкладка скрыта, экономя ресурсы CPU и заряд батареи.

Цикл rAF: определите функцию animate, которая рисует текущий кадр, а затем вызывает requestAnimationFrame(animate), чтобы запланировать следующий. Браузер вызывает animate перед каждым перерисовыванием, создавая непрерывную анимацию с частотой кадров экрана.

rAF передаёт в обратный вызов временную метку высокой точности DOM (миллисекунды с момента загрузки страницы). Используйте её для вычисления движения, независимого от частоты кадров: delta = timestamp - lastTimestamp. Умножайте скорость на delta, чтобы объект проходил одинаковое расстояние в секунду независимо от частоты кадров.

Вычисляйте время, прошедшее с последнего кадра, и соответственно масштабируйте перемещение. Объект, движущийся со скоростью 100 пикселей в секунду, проходит 100 * (delta / 1000) пикселей за кадр. Это обеспечивает одинаковую физику на экранах с частотой 30 FPS и 144 FPS.

rAF возвращает дескриптор. Отмените его с помощью cancelAnimationFrame(handle). Сохраните дескриптор в переменной, проверяйте флаг выполнения внутри цикла или отменяйте анимацию при очистке компонента. Всегда отменяйте циклы, когда элемент удаляется из DOM.

На каждом кадре: (1) очистите весь холст с помощью clearRect, (2) обновите переменные состояния (позицию, угол, время), (3) нарисуйте все объекты в новых позициях, (4) вызовите requestAnimationFrame для следующего кадра. Никогда не пропускайте clearRect — старые кадры будут накапливаться в виде шлейфа.

Используйте CSS-переходы и анимации для простых анимаций на основе свойств (эффекты при наведении, выезжающие модальные окна). Применяйте rAF для сложных интерактивных анимаций — игровых циклов, физических симуляций и отрисовки на холсте, — когда нужен детальный контроль над каждым кадром.

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

Ограничьте частоту кадров меньшим значением (например, 30 FPS): перед отрисовкой проверяйте, прошло ли достаточно времени с последнего рисования. if (timestamp - lastDraw >= 1000/30) { draw(); lastDraw = timestamp; }. Планируйте rAF в любом случае, чтобы сохранять отзывчивость.

Панель производительности Chrome DevTools записывает обратные вызовы rAF на пламенной диаграмме JS. Ищите длинные обратные вызовы, превышающие 16 мс: они приводят к пропуску кадров. Используйте счётчик FPS (Визуализация → Счётчик FPS), чтобы наблюдать частоту кадров в реальном времени во время взаимодействия.

Для более простых декларативных анимаций без ручного управления временем используйте: element.animate(keyframes, options). WAAPI обрабатывает функции синхронизации, режимы заполнения и повторы, передавая вычисление кадров браузеру. Используйте rAF для пользовательской логики отрисовки, которую WAAPI не может выразить.

Почему скорость анимации нужно умножать на время delta в цикле requestAnimationFrame?

requestAnimationFrame синхронизирует анимацию JavaScript с частотой обновления экрана и приостанавливается для скрытых вкладок. Параметр временной метки обеспечивает движение, независимое от частоты кадров, благодаря масштабированию по времени delta. Шаблон цикла анимации холста (очистить, обновить, нарисовать, запланировать) в сочетании с cancelAnimationFrame для очистки служит основой плавных и эффективных веб-анимаций.