Задержка перед стартом

В Motion One управление временем является одной из ключевых возможностей библиотеки. Помимо длительности, easing-функций и ключевых кадров, важную роль играет параметр, отвечающий за отсрочку запуска анимации. Он позволяет управлять моментом начала эффекта относительно момента вызова animate() или изменения состояния в motion.

Базовый принцип работы задержки

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

import { animate } from "motion";

animate(
  ".box",
  { opacity: [0, 1] },
  { delay: 500 }
);

В этом примере анимация изменения прозрачности не начнётся сразу, а будет отложена на 500 мс. До истечения этого времени элемент остаётся в начальном состоянии.

Логика выполнения внутри движка

При вызове animate() Motion One создаёт внутренний таймер, который управляет запуском анимационного цикла. Параметр delay не влияет на длительность анимации, а лишь сдвигает момент старта.

Общая временная модель выглядит следующим образом:

  • момент вызова функции — t₀
  • период задержки — delay
  • фактическое начало анимации — t₀ + delay
  • завершение — t₀ + delay + duration

Такое разделение позволяет точно синхронизировать сложные последовательности эффектов.

Влияние задержки на начальное состояние

До начала анимации элемент находится в состоянии, определённом первой ключевой точкой. Например, в случае:

animate(
  ".box",
  { transform: ["translateX(0px)", "translateX(200px)"] },
  { delay: 1000, duration: 800 }
);

элемент остаётся в положении translateX(0px) в течение одной секунды. Только после этого начинается переход ко второй точке.

Важно, что Motion One заранее применяет начальные стили, чтобы избежать визуальных скачков при запуске таймера.

Задержка и последовательность анимаций

Одно из основных применений delay — построение цепочек анимаций без использования внешних управляющих структур.

animate(".item-1", { opacity: [0, 1] }, { delay: 0 });
animate(".item-2", { opacity: [0, 1] }, { delay: 200 });
animate(".item-3", { opacity: [0, 1] }, { delay: 400 });

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

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

Сочетание delay и duration

Параметры delay и duration независимы друг от друга, но вместе формируют полную временную модель анимации.

animate(
  ".panel",
  { opacity: [0, 1], y: [20, 0] },
  { delay: 300, duration: 600 }
);
  • 300 мс — ожидание перед стартом
  • 600 мс — длительность перехода

Итоговое время жизни анимации составляет 900 мс, но визуально движение начинается только после задержки.

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

Motion One поддерживает отрицательные значения delay. Такой приём используется для имитации «догоняющего» состояния анимации, когда эффект стартует не с начала, а с уже прошедшего времени.

animate(
  ".box",
  { x: [0, 300] },
  { delay: -200, duration: 1000 }
);

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

Задержка в keyframes-анимациях

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

animate(
  ".box",
  { x: [0, 100, 200, 0] },
  { delay: 400, duration: 1200 }
);

Здесь весь набор переходов начнётся только после 400 мс ожидания, после чего равномерно распределится по заданной длительности.

Задержка и функции с динамическими значениями

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

animate(
  ".item",
  { opacity: [0, 1] },
  {
    delay: (i) => i * 100
  }
);

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

Влияние delay на производительность

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

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

Синхронизация задержек между элементами

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

animate(".header", { opacity: [0, 1] }, { delay: 0 });
animate(".content", { opacity: [0, 1] }, { delay: 300 });
animate(".footer", { opacity: [0, 1] }, { delay: 600 });

Такой подход создаёт визуальный ритм, где каждый элемент вступает в анимацию строго по заданному интервалу.

Комбинация delay с пользовательскими триггерами

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

button.addEventListener("click", () => {
  animate(".modal", { scale: [0.8, 1] }, { delay: 150 });
});

Даже при мгновенном срабатывании события анимация будет дополнительно смещена во времени.

Особенности интерпретации delay в Motion One

В отличие от более тяжёлых анимационных библиотек, Motion One обрабатывает задержку максимально напрямую, без промежуточных слоёв планировщиков. Это делает поведение delay предсказуемым:

  • всегда измеряется в миллисекундах
  • не зависит от кадровой частоты
  • не изменяет easing и duration
  • применяется до начала вычисления прогресса анимации

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

Оглавление