Откройте для себя requestanimationframe и создайте потрясающие анимации на своем веб-сайте!

requestAnimationFrame

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

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

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

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

Предположим, у нас есть элемент <div> с идентификатором "box", который мы хотим анимировать движение вправо и влево на заданное расстояние.

HTML код:

<div id="box">Анимируемый элемент</div>

CSS код:

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}

JavaScript код:

const box = document.getElementById("box");
let position = 0;
let direction = 1;

function animate() {
  // Обновляем позицию элемента
  position += direction;

  // Ограничиваем движение элемента внутри родительского блока
  if (position > 300 || position < 0) {
    direction *= -1;
  }

  // Устанавливаем новые координаты элемента
  box.style.left = position + "px";

  // Вызываем requestAnimationFrame для следующей анимации
  requestAnimationFrame(animate);
}

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