Duration - длительность

duration — один из ключевых параметров в библиотеке mo.js, определяющий, сколько времени (в миллисекундах) занимает выполнение анимации. От правильной настройки длительности зависит восприятие движения, ритм интерфейса и общая плавность визуальных эффектов.

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

Параметр duration задаётся в миллисекундах и применяется практически ко всем анимационным сущностям: Shape, Tween, Burst, Timeline.

const circle = new mojs.Shape({
  shape: 'circle',
  radius: { 0: 50 },
  duration: 1000
});

В данном примере анимация увеличения радиуса круга происходит за 1000 мс (1 секунду).

Значение по умолчанию

Если параметр duration не указан, mo.js использует стандартное значение:

duration: 1000

Это означает, что любая анимация без явного указания длительности будет длиться одну секунду.

Влияние на восприятие анимации

Длительность напрямую влияет на характер движения:

  • Короткая длительность (100–300 мс) Быстрая, резкая анимация Подходит для кликов, откликов интерфейса

  • Средняя длительность (300–800 мс) Сбалансированная, естественная Используется в большинстве UI-анимаций

  • Длительная (800–2000+ мс) Медленная, выразительная Применяется для декоративных эффектов

Связь с easing

Параметр duration работает в тесной связке с easing. Даже при одинаковой длительности визуальный результат может сильно отличаться.

const shape = new mojs.Shape({
  radius: { 0: 100 },
  duration: 1000,
  easing: 'elastic.out'
});

Здесь вся анимация занимает 1 секунду, но распределение движения по времени определяется функцией easing.

Динамическая длительность

duration может задаваться не только числом, но и функцией:

duration: () => Math.random() * 1000 + 500

Каждый запуск анимации будет иметь случайную длительность от 500 до 1500 мс. Это полезно для создания естественных, “живых” эффектов.

Разные длительности для разных свойств

В mo.js нельзя напрямую задать отдельную длительность для каждого свойства внутри одного объекта. Однако можно комбинировать несколько анимаций:

const move = new mojs.Shape({
  x: { 0: 200 },
  duration: 500
});

const scale = new mojs.Shape({
  scale: { 0: 1 },
  duration: 1000
});

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

Duration в Timeline

При использовании Timeline параметр duration влияет на общий тайминг всей композиции.

const timeline = new mojs.Timeline();

timeline.add([
  new mojs.Shape({ duration: 500 }),
  new mojs.Shape({ duration: 1000 })
]);

Общая длительность таймлайна определяется самой длинной анимацией (в данном случае — 1000 мс), если не задано иначе.

Переопределение длительности при повторе

При использовании параметра repeat длительность влияет на каждый цикл:

new mojs.Shape({
  radius: { 0: 50 },
  duration: 500,
  repeat: 3
});

Общее время выполнения:

500 мс × (1 + repeat) = 2000 мс

Связь с delay

duration часто используется вместе с delay:

new mojs.Shape({
  duration: 1000,
  delay: 500
});
  • delay — задержка перед началом (500 мс)
  • duration — сама анимация (1000 мс)

Общее время: 1500 мс

Управление длительностью в Burst

В Burst параметр duration применяется ко всем частицам:

new mojs.Burst({
  count: 10,
  duration: 800
});

Однако можно задать разброс:

duration: { 500: 1500 }

Каждая частица получит случайную длительность в указанном диапазоне.

Диапазоны значений

mo.js поддерживает интерполяцию:

duration: { 300: 900 }

Это означает:

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

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

При использовании stagger (разброса параметров) длительность играет важную роль:

new mojs.Burst({
  count: 5,
  duration: 1000,
  delay: 'stagger(100)'
});

Каждый следующий элемент запускается позже, но длительность остаётся одинаковой.

Производительность и duration

Слишком короткие длительности:

  • создают резкие переходы
  • могут выглядеть “дёргано”

Слишком длинные:

  • перегружают интерфейс
  • замедляют восприятие

Оптимальная длительность:

  • должна соответствовать цели анимации
  • учитывать контекст интерфейса

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

1. Мгновенный отклик

duration: 150

2. Стандартная UI-анимация

duration: 300

3. Декоративный эффект

duration: 1200

Комбинирование duration и speed

mo.js позволяет управлять скоростью через .setSpeed():

shape.setSpeed(2);

Фактическая длительность уменьшится в 2 раза:

effective duration = duration / speed

Duration и обратная анимация

При использовании .playBackward() длительность остаётся той же:

shape.playBackward();

Время выполнения не меняется, только направление.

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

1. Слишком короткая длительность

duration: 50

Анимация становится незаметной.

2. Игнорирование easing Длительность без правильной кривой даёт “плоский” эффект.

3. Несогласованные duration в группе Разные значения могут ломать композицию.

Рекомендации

  • Использовать кратные значения (200, 400, 600)
  • Синхронизировать длительности в сложных сценах
  • Проверять анимации на разных скоростях
  • Комбинировать с easing для выразительности

Внутренний механизм

В основе duration лежит временная шкала, где:

  • 0 — начало анимации
  • duration — конец

mo.js интерполирует значения свойств по времени с учётом easing-функции.

Итоговая роль duration

duration определяет:

  • темп анимации
  • эмоциональное восприятие
  • синхронизацию элементов
  • ритм интерфейса

Это фундаментальный параметр, от которого зависит вся динамика анимации в mo.js.

Оглавление