В анимационной системе mo.js время рассматривается как первичный управляющий параметр, определяющий порядок, перекрытие и поведение эффектов. Сдвиг по времени в контексте библиотеки означает управление моментом старта, длительностью и относительным расположением анимаций на временной оси, включая их взаимные задержки, перекрытия и синхронизацию в рамках одной сцены или сложной последовательности.
Любая анимация в системе строится вокруг нескольких базовых характеристик:
Эти параметры формируют дискретную единицу времени, которая затем может быть встроена в более сложные структуры — таймлайны и композиции.
Сдвиг по времени возникает тогда, когда несколько анимаций начинают взаимодействовать не одновременно, а с заданными смещениями относительно друг друга или общего начала сцены.
Простейшая форма временного сдвига — задержка старта анимации:
new mojs.Html({
el: '.box',
x: { 0: 200 },
duration: 800,
delay: 300
});Задержка формирует смещение начала анимации относительно глобального времени исполнения. Это позволяет создавать последовательные эффекты без необходимости ручного управления состояниями.
Важная особенность заключается в том, что delay не влияет на саму длительность анимации — он изменяет только момент её запуска.
Временной сдвиг может принимать отрицательные значения. В этом случае анимация начинается так, как будто часть её уже была проиграна.
new mojs.Html({
el: '.circle',
scale: { 0: 1 },
duration: 1000,
delay: -400
});Такой подход используется для синхронизации элементов, когда необходимо добиться эффекта одновременного старта без визуальной паузы, либо встроить анимацию в уже идущую временную шкалу.
Фактически отрицательная задержка переводит анимацию в состояние частичного прогресса при старте.
При работе с группами объектов сдвиг по времени часто реализуется через каскадное распределение задержек. Это создаёт эффект волны или последовательного появления.
const els = document.querySelectorAll('.item');
els.forEach((el, i) => {
new mojs.Html({
el,
y: { 50: 0 },
opacity: { 0: 1 },
duration: 600,
delay: i * 120
});
});Здесь каждый следующий элемент смещается по времени относительно предыдущего. Такой метод масштабируется линейно и позволяет создавать сложные последовательности без центрального таймера.
Ключевой принцип — формирование временного шага (time step), который задаёт расстояние между стартами анимаций.
Более строгая модель управления сдвигами реализуется через таймлайны. Таймлайн агрегирует несколько анимаций и задаёт им общую временную ось.
Внутри таймлайна каждая анимация получает локальное время, смещённое относительно начала контейнера.
const timeline = new mojs.Timeline();
timeline.add([
new mojs.Html({
el: '.a',
x: { 0: 100 },
duration: 500,
delay: 0
}),
new mojs.Html({
el: '.b',
x: { 0: 100 },
duration: 500,
delay: 200
})
]);
timeline.play();В этом случае delay начинает играть роль локального смещения внутри общего контейнера, а не глобального времени.
Таймлайн позволяет выстраивать иерархию временных зависимостей, где отдельные блоки анимации могут быть синхронизированы или разнесены по оси времени без конфликтов.
Сдвиг по времени часто используется не для последовательности, а для создания перекрытий. Это достигается за счёт перекрывающихся интервалов duration и delay.
Если:
то в интервале 400–800ms обе анимации будут выполняться одновременно.
Такой подход создаёт ощущение непрерывного движения и используется для сложных сцен, где элементы не должны «ждать» завершения друг друга.
При создании сложных сцен полезно вводить коэффициенты масштабирования времени:
const speed = 1.5;
new mojs.Html({
el: '.block',
x: { 0: 300 },
duration: 1000 / speed,
delay: 200 / speed
});Такой подход позволяет централизованно управлять временной динамикой без переписывания каждой анимации.
Временной сдвиг может быть выровнен относительно общего стартового момента. Для этого используется концепция единого начала координат времени.
const start = 500;
new mojs.Html({
el: '.left',
x: { 0: 100 },
duration: 600,
delay: start
});
new mojs.Html({
el: '.right',
x: { 0: -100 },
duration: 600,
delay: start
});Обе анимации стартуют синхронно, несмотря на различия в параметрах движения.
При проектировании сложных анимационных систем временные сдвиги перестают быть просто числовыми значениями и превращаются в логическую структуру зависимостей.
Выделяются типовые модели:
Каждая модель определяет способ расчёта delay и duration.
Линейный шаг не всегда подходит для выразительных эффектов. Часто применяется нелинейное распределение временных сдвигов:
const items = document.querySelectorAll('.dot');
items.forEach((el, i) => {
const delay = Math.pow(i, 1.5) * 80;
new mojs.Html({
el,
scale: { 0: 1 },
duration: 500,
delay
});
});В результате элементы появляются не равномерно, а с ускоряющимся интервалом, что создаёт ощущение физической инерции или волнового разгона.
В сложных композициях вводятся временные якоря — точки, относительно которых выстраиваются группы анимаций.
const t0 = 0;
const t1 = 300;
const t2 = 700;
new mojs.Html({
el: '.stage1',
opacity: { 0: 1 },
duration: 300,
delay: t0
});
new mojs.Html({
el: '.stage2',
opacity: { 0: 1 },
duration: 300,
delay: t1
});
new mojs.Html({
el: '.stage3',
opacity: { 0: 1 },
duration: 300,
delay: t2
});Такая структура позволяет поддерживать читаемость временной логики при росте сложности сцены.
Delay и duration образуют взаимосвязанную систему. Изменение одного параметра часто требует пересчёта другого, особенно при плотных анимационных композициях.
Если задержка слишком велика относительно длительности, сцена теряет динамическую связность. Если слишком мала — возникает визуальная перегрузка.
Баланс достигается через соотношение:
Группы элементов могут иметь общий сдвиг, применяемый ко всем анимациям внутри блока:
const baseDelay = 400;
const group = [
{ el: '.g1', shift: 0 },
{ el: '.g2', shift: 100 },
{ el: '.g3', shift: 200 }
];
group.forEach(item => {
new mojs.Html({
el: item.el,
y: { 50: 0 },
duration: 500,
delay: baseDelay + item.shift
});
});Здесь появляется двухуровневая модель времени: глобальный сдвиг и локальный внутри группы.
Временные параметры могут вычисляться на лету, что позволяет создавать адаптивные анимации:
new mojs.Html({
el: '.dynamic',
x: { 0: 200 },
duration: el => 400 + el.index * 50,
delay: el => el.index * 80
});Такая модель используется для сцен, где количество элементов заранее неизвестно или изменяется во время выполнения.
При увеличении количества анимаций временная ось разбивается на логические слои:
Каждый слой имеет собственный диапазон delay и duration, что предотвращает хаотическое наложение событий.
При неправильной настройке сдвигов возникают конфликты:
Решение заключается в нормализации временной шкалы и введении ограничений на диапазоны delay и duration в рамках одного контекста исполнения.
Сдвиг по времени в анимационных системах представляет собой многослойную структуру, где каждый параметр влияет на общий ритм сцены. Внутренние задержки, отрицательные смещения, каскадные распределения и таймлайны формируют единое пространство управления временем, в котором анимации перестают быть изолированными сущностями и превращаются в связанную временную композицию.