Можно ли сделать анимацию только на Promise?

Почему Promise не подходит для анимации

Promise — это объект, представляющий результат асинхронной операции. Он позволяет выполнять код после завершения задачи, но не предоставляет средств для управления временем или частотой обновления. Анимация требует изменения свойств элемента (например, позиции или прозрачности) с определенной частотой (обычно 60 кадров в секунду). Promise не может генерировать такие повторяющиеся вызовы.

Как можно использовать Promise в анимации

Promise может быть полезен для организации последовательности анимаций. Например, вы можете создать функцию, которая возвращает Promise, разрешающийся после завершения одного анимационного шага. Затем с помощью цепочки .then() можно запустить следующий шаг. Однако сам шаг анимации должен быть реализован с помощью requestAnimationFrame или setInterval.

Пример кода

function animateElement(element, targetPosition, duration) {
  return new Promise((resolve) => {
    const start = performance.now();
    const startPosition = element.offsetLeft;

    function step(currentTime) {
      const elapsed = currentTime - start;
      const progress = Math.min(elapsed / duration, 1);
      const currentPosition = startPosition + (targetPosition - startPosition) * progress;
      element.style.left = currentPosition + 'px';

      if (progress < 1) {
        requestAnimationFrame(step);
      } else {
        resolve();
      }
    }

    requestAnimationFrame(step);
  });
}

// Использование
const box = document.getElementById('box');
animateElement(box, 300, 1000)
  .then(() => animateElement(box, 100, 500));

Вывод

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