Duration

Duration в Velocity.js задаёт временной интервал выполнения анимации и является ключевым параметром, определяющим динамику изменения свойств элемента во времени. Значение duration напрямую влияет на восприятие интерфейса: одинаковые трансформации при разных длительностях создают принципиально разный пользовательский опыт.

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

Числовое значение в миллисекундах

Наиболее распространённый вариант — явное указание длительности в миллисекундах.

Velocity(element, { opacity: 1 }, { duration: 1000 });

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

Предустановленные строки

Поддерживаются строковые алиасы, упрощающие быстрое определение скорости анимации:

Velocity(element, { opacity: 1 }, { duration: "fast" });
Velocity(element, { opacity: 1 }, { duration: "slow" });

Обычно:

  • "fast" соответствует примерно 200 мс
  • "slow" соответствует примерно 600 мс

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

Функция как значение duration

Duration может вычисляться динамически для каждого элемента или каждого вызова анимации.

Velocity(element, { translateX: 200 }, {
  duration: function () {
    return 300 + Math.random() * 700;
  }
});

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

Влияние duration на кривые easing

Duration не существует изолированно от easing-функции. Оба параметра формируют итоговую траекторию изменения значения.

При коротких интервалах easing с выраженной нелинейностью может визуально терять эффект, поскольку ускорение и замедление не успевают проявиться. При увеличении duration:

  • ускоряющая часть становится заметнее
  • замедление в финальной фазе становится более выраженным
  • движение воспринимается более «естественным»
Velocity(element, { left: "300px" }, {
  duration: 2000,
  easing: "ease-out"
});

В данном случае основная часть движения происходит в начале, а финальное замедление растягивается во времени.

Duration и очередь анимаций

Velocity.js использует очередь анимаций, и duration влияет на суммарное время выполнения цепочек.

Velocity(element, { top: 100 }, { duration: 500 });
Velocity(element, { left: 200 }, { duration: 1000 });
Velocity(element, { opacity: 0 }, { duration: 300 });

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

Velocity(element, { top: 100 }, { duration: 500, queue: false });
Velocity(element, { left: 200 }, { duration: 1000, queue: false });

В этом случае каждая анимация живёт в собственном временном интервале.

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

Stagger создаёт задержку между стартами анимаций, однако не изменяет саму длительность каждого отдельного элемента.

Velocity(elements, {
  opacity: 1,
  translateY: 0
}, {
  duration: 800,
  stagger: 100
});

Здесь:

  • каждый элемент анимируется 800 мс
  • старт следующего смещается на 100 мс
  • итоговая визуальная длина всей группы увеличивается, но duration каждого элемента остаётся неизменным

Глобальные настройки duration

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

Velocity.defaults.duration = 400;

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

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

Перекрытие duration на уровне вызова

Локальный параметр всегда имеет приоритет над глобальными настройками:

Velocity.defaults.duration = 400;

Velocity(element, { opacity: 1 }); // 400ms
Velocity(element, { opacity: 0 }, { duration: 1200 }); // 1200ms

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

Duration и трансформации

При анимации трансформаций (translate, scale, rotate) длительность влияет на визуальную плавность изменений. Короткие интервалы часто приводят к ощущению «рывка», особенно при изменении нескольких свойств одновременно.

Velocity(element, {
  translateX: 300,
  scale: 1.5,
  rotateZ: "45deg"
}, {
  duration: 1500
});

При увеличении duration все трансформации синхронизируются во времени, создавая единое движение без визуального расслоения эффектов.

Синхронизация duration с requestAnimationFrame

Velocity.js работает поверх requestAnimationFrame, и duration определяет количество кадров, доступных для интерполяции значений.

При 60 FPS:

  • 1000 ms ≈ 60 кадров
  • 500 ms ≈ 30 кадров
  • 100 ms ≈ 6 кадров

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

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

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

Короткие анимации:

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

Длинные анимации:

  • равномерно распределяют нагрузку
  • уменьшают резкие пики CPU/GPU
  • повышают стабильность визуального потока
Velocity(elements, { opacity: 1 }, {
  duration: 1200,
  stagger: 50
});

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

Duration и аппаратное ускорение

При использовании transform-свойств браузер часто применяет GPU-ускорение. Duration в этом контексте определяет не только время интерполяции, но и продолжительность удержания слоя в compositing pipeline.

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

Распределение duration между свойствами

Velocity.js интерполирует все свойства в рамках одного временного интервала, заданного duration. Это означает, что разные свойства не имеют независимых таймеров внутри одного вызова.

Velocity(element, {
  width: "300px",
  height: "300px",
  opacity: 0.5
}, {
  duration: 800
});

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

Зависимость duration от пользовательского опыта

Разные значения duration формируют разные паттерны восприятия интерфейса:

  • до 150 мс — мгновенные реакции
  • 150–400 мс — быстрые интерфейсные переходы
  • 400–1000 мс — стандартные плавные анимации
  • более 1000 мс — выразительные декоративные эффекты

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

Оглавление