Delay - задержка старта

В библиотеке mo.js параметр delay отвечает за задержку перед началом анимации. Он определяет, сколько времени (в миллисекундах) должно пройти после запуска анимации до фактического старта её выполнения. Это позволяет точно контролировать последовательность появления эффектов и синхронизировать несколько анимаций между собой.

Базовое использование

Значение delay задаётся в миллисекундах:

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  fill: 'none',
  stroke: 'cyan',
  strokeWidth: { 10: 0 },
  duration: 1000,
  delay: 500
});

circle.play();

В этом примере анимация начнётся через 500 мс после вызова play().

Влияние на тайминг анимации

delay не изменяет саму длительность (duration), а лишь сдвигает начало выполнения. Общая временная линия выглядит так:

[delay] → [duration]

Если:

  • delay = 500
  • duration = 1000

то полное время от вызова до завершения составит 1500 мс.

Использование в последовательных анимациях

Один из ключевых сценариев применения — создание цепочек анимаций:

const first = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 40 },
  fill: 'red',
  duration: 600
});

const second = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 40 },
  fill: 'blue',
  duration: 600,
  delay: 600
});

first.play();
second.play();

Здесь вторая анимация начнётся сразу после завершения первой за счёт совпадения delay и duration.

Работа с Timeline

При использовании mojs.Timeline параметр delay становится особенно полезным для тонкой настройки синхронизации:

const timeline = new mojs.Timeline();

const shape1 = new mojs.Shape({
  shape: 'rect',
  x: { -100: 0 },
  duration: 800
});

const shape2 = new mojs.Shape({
  shape: 'rect',
  x: { 100: 0 },
  duration: 800,
  delay: 400
});

timeline.add(shape1, shape2);
timeline.play();

В данном случае:

  • первый элемент начинает движение сразу
  • второй стартует через 400 мс, создавая эффект догоняющего движения

Динамическая задержка

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

const burst = new mojs.Burst({
  count: 5,
  delay: (index) => index * 100,
  radius: { 0: 100 }
});

Каждый следующий элемент будет запускаться с увеличенной задержкой:

  • 0 мс
  • 100 мс
  • 200 мс
  • и т.д.

Это часто используется для создания «волновых» или каскадных эффектов.

Комбинация с stagger

Хотя delay может выполнять роль ступенчатого запуска, для групп элементов удобнее применять stagger, но внутри mojs часто используется именно функция delay, как показано выше.

Взаимодействие с repeat и yoyo

При использовании повторов важно учитывать, что delay применяется только перед первым запуском, если не указано иное:

const shape = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 30 },
  duration: 500,
  delay: 300,
  repeat: 3
});

Поведение:

  • первая итерация начнётся через 300 мс
  • последующие повторы выполняются без дополнительной задержки

Отрицательные значения

В некоторых версиях и сценариях допустимы отрицательные значения delay, что позволяет «перемотать» анимацию вперёд:

delay: -200

Это означает, что анимация начнётся сразу, но как будто уже прошло 200 мс её выполнения.

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

  • синхронизация с внешними таймлайнами
  • создание эффекта «в середине движения»

Частые ошибки

1. Путаница с duration

  • delay не замедляет анимацию
  • он лишь откладывает её старт

2. Несоответствие таймингов

  • при ручной синхронизации легко ошибиться, если не учитывать суммарное время

3. Избыточные задержки

  • большое количество delay в сложных сценах может усложнить управление и сопровождение кода

Практические паттерны

Каскадная анимация элементов интерфейса:

items.forEach((item, i) => {
  new mojs.Shape({
    parent: item,
    opacity: { 0: 1 },
    delay: i * 100
  }).play();
});

Имитация физического запаздывания:

delay: Math.random() * 300

Синхронизация с событиями:

setTimeout(() => animation.play(), 200);

или напрямую:

delay: 200

Когда использовать delay

  • для выстраивания последовательности анимаций
  • при создании сложных сцен с несколькими объектами
  • для улучшения визуального восприятия через ритм и паузы
  • при имитации естественных процессов (волны, цепные реакции)

Когда лучше избегать

  • при необходимости точного контроля всей временной шкалы (лучше использовать Timeline)
  • в сильно вложенных анимациях, где проще управлять через общий контроллер
  • при динамически изменяющихся сценариях, где задержка может стать источником рассинхронизации

Связанные параметры

  • duration — длительность анимации
  • repeat — количество повторов
  • speed — скорость воспроизведения
  • timeline — управление несколькими анимациями

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

Оглавление