Задержки и повторения

В Popmotion управление временем строится вокруг композиции функций и явного задания временных параметров. Базовый механизм задержки реализуется через delay, позволяющий отложить запуск действия без необходимости вручную управлять setTimeout.

import { delay } from 'popmotion';

delay(1000).start({
  complete: () => console.log('Прошла 1 секунда')
});

delay возвращает action, который можно встроить в цепочки анимаций. Его задача — создать паузу, после которой последует продолжение логики. В отличие от императивного таймера, задержка становится частью декларативного потока анимации.

Часто задержка используется перед запуском tween или keyframes, чтобы выстроить последовательность появления элементов.

import { delay, tween } from 'popmotion';

delay(500).start({
  complete: () => {
    tween({
      from: 0,
      to: 100,
      duration: 800
    }).start(v => console.log(v));
  }
});

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

Задержка как часть композиции потоков

Popmotion позволяет воспринимать задержку как полноценное звено композиции. Вместо разрозненных вызовов времени используется единая модель потока.

import { delay, tween, composite } from 'popmotion';

composite([
  delay(300),
  tween({ from: 0, to: 1, duration: 500 })
]).start();

Задержка здесь становится элементом графа выполнения. Это упрощает масштабирование сложных анимационных сценариев, где важно контролировать порядок появления эффектов.

Повторение анимаций через repeat

Повторение — ключевой механизм для создания циклических или многократных эффектов. В Popmotion повторение реализуется через repeat, который оборачивает базовую анимацию и задаёт количество итераций.

import { repeat, tween } from 'popmotion';

const animation = tween({
  from: 0,
  to: 100,
  duration: 400
});

repeat(animation, 3).start(v => {
  console.log(v);
});

Здесь анимация выполнится три раза подряд. Каждая новая итерация начинается с начального состояния, определённого в tween.

Повторение не требует ручного перезапуска, что устраняет необходимость в внешнем контроле состояния.

Бесконечные циклы

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

import { repeat, tween } from 'popmotion';

const pulse = repeat(
  tween({
    from: 0,
    to: 1,
    duration: 600
  }),
  Infinity
);

pulse.start(v => console.log(v));

Использование Infinity превращает анимацию в непрерывный поток значений. Управление остановкой выполняется через метод stop.

Loop как специализированный механизм повторения

Помимо repeat, существует более высокоуровневый инструмент loop, ориентированный на непрерывные анимации, где важно учитывать плавность перехода между циклами.

import { loop, tween } from 'popmotion';

const looped = loop(
  tween({
    from: 0,
    to: 360,
    duration: 1000
  })
);

looped.start(v => console.log(v));

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

Контроль итераций и управление состоянием

Повторяющиеся анимации требуют контроля жизненного цикла. Popmotion предоставляет возможность отслеживать прогресс и завершение каждой итерации через подписки.

import { repeat, tween } from 'popmotion';

const anim = repeat(
  tween({
    from: 0,
    to: 1,
    duration: 300
  }),
  5
);

anim.start({
  update: v => console.log('значение', v),
  complete: () => console.log('все повторы завершены')
});

Такой подход позволяет синхронизировать повторяющиеся анимации с внешними событиями интерфейса.

Задержки внутри повторяющихся сценариев

Комбинация задержек и повторений используется для создания ритмических эффектов. Например, можно добавить паузу между циклами анимации.

import { repeat, tween, delay } from 'popmotion';

const step = () =>
  delay(200).start({
    complete: () => {
      tween({
        from: 0,
        to: 100,
        duration: 400
      }).start();
    }
  });

repeat(step, 4).start();

Каждая итерация включает задержку, формируя структуру «движение — пауза — движение».

Переиспользование задержек в композициях

Задержки часто используются как строительный блок для сложных последовательностей. В сочетании с keyframes они позволяют выстраивать нелинейные сценарии.

import { keyframes, delay } from 'popmotion';

const sequence = keyframes({
  values: [0, 50, 100],
  times: [0, 0.5, 1],
  duration: 1000
});

delay(300).start({
  complete: () => sequence.start(v => console.log(v))
});

Такая модель позволяет управлять стартом сложных анимаций без изменения их внутренней структуры.

Повторение с динамическими параметрами

В некоторых сценариях повторение требует изменения параметров на каждой итерации. Popmotion позволяет оборачивать анимацию в функцию, возвращающую новое состояние.

import { repeat, tween } from 'popmotion';

const animated = () =>
  tween({
    from: 0,
    to: Math.random() * 100,
    duration: 500
  });

repeat(animated, 10).start(v => console.log(v));

Каждый запуск создаёт новое поведение, сохраняя общий механизм повторения.

Сочетание задержек и циклов в UI-анимациях

Комбинация задержек и повторений применяется для интерфейсных эффектов: появления элементов, последовательных подсветок, пульсаций уведомлений.

import { delay, repeat, tween } from 'popmotion';

const notification = () =>
  delay(1000).start({
    complete: () => {
      repeat(
        tween({ from: 0, to: 1, duration: 200 }),
        3
      ).start();
    }
  });

notification();

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

Управление остановкой повторяющихся процессов

Любая повторяющаяся анимация должна иметь возможность остановки. Popmotion предоставляет единый интерфейс управления жизненным циклом через stop.

import { repeat, tween } from 'popmotion';

const anim = repeat(
  tween({
    from: 0,
    to: 100,
    duration: 400
  }),
  Infinity
);

const controls = anim.start(v => console.log(v));

setTimeout(() => {
  controls.stop();
}, 3000);

Остановка завершает поток значений и освобождает ресурсы исполнения.

Задержки как инструмент синхронизации потоков

Задержки используются не только для визуального эффекта, но и для синхронизации нескольких параллельных потоков анимации. Они позволяют выравнивать временные шкалы разных действий без сложной координации.

import { delay, tween } from 'popmotion';

const a = tween({ from: 0, to: 50, duration: 500 });
const b = tween({ from: 0, to: 100, duration: 500 });

delay(200).start({
  complete: () => {
    a.start();
    b.start();
  }
});

Такой подход обеспечивает детерминированный порядок запуска анимаций при сохранении независимости их логики.