Анимации на JavaScript без библиотек: Используем requestAnimationFrame()

Когда дело доходит до создания плавных анимаций на веб-страницах, многие разработчики обращаются к CSS-анимациям или сторонним библиотекам, таким как GSAP или anime.js. Но что, если вам нужно больше контроля? Здесь на помощь приходит requestAnimationFrame().

Это встроенная функция JavaScript, которая позволяет запускать анимации синхронно с обновлением экрана, обеспечивая максимальную производительность и плавность.

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

js
Копировать код
function animate() {
  const box = document.querySelector('.box');
  let position = 0;

  function move() {
    position += 2; 
    box.style.transform = `translateX(${position}px)`;

    if (position < 300) {
      requestAnimationFrame(move);
    }
  }

  requestAnimationFrame(move);
}

animate();

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

Преимущества использования requestAnimationFrame:

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

Следующий раз, когда вам нужно будет создать кастомную анимацию с максимальной оптимизацией, попробуйте использовать requestAnimationFrame() вместо библиотек.