Длительность и задержка

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

Параметр duration

duration определяет, сколько времени анимация будет выполняться, в миллисекундах.

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

В этом примере анимация прозрачности до 50% займет 1000 миллисекунд (1 секунда).

Особенности использования duration:

  • Можно использовать числовое значение в миллисекундах (например, 500, 2000).

  • Velocity.js поддерживает предустановленные строковые значения:

    • "fast" – примерно 200 мс
    • "normal" – примерно 400 мс
    • "slow" – примерно 600 мс

  • Если duration не указан, используется значение по умолчанию (400 мс).

Пример с предустановкой:

Velocity(element, { width: "200px" }, { duration: "slow" });

Параметр delay

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

Velocity(element, { height: "100px" }, { delay: 500 });

В этом примере элемент начнет изменять высоту только через 500 мс после вызова анимации.

Важные особенности:

  • delay может использоваться вместе с duration для синхронизации нескольких анимаций.
  • Можно задавать отрицательные значения, что позволяет «ускорять» анимацию, делая её уже частично выполненной на момент старта (редкая, но полезная техника для сложных последовательностей).

Совместное использование duration и delay

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

Velocity(element, 
  { opacity: 0 }, 
  { duration: 1000, delay: 500 }
);
  • Сначала пройдет 500 мс задержки
  • Затем анимация займет 1000 мс

Это особенно важно при создании цепочек анимаций или последовательных эффектов:

Velocity(element1, { left: "100px" }, { duration: 800 })
  .then(() => Velocity(element2, { top: "50px" }, { duration: 1200, delay: 300 }));
  • Первая анимация выполняется 800 мс
  • Вторая начинается через 300 мс после завершения первой

Динамическое управление длительностью

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

Velocity(element, { width: "300px" }, { 
  duration: () => element.offsetWidth * 2, 
  delay: 200 
});
  • Длительность вычисляется как удвоенная ширина элемента
  • Задержка фиксирована 200 мс

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

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

  • Анимации в одной очереди выполняются последовательно с учетом delay каждой анимации.
  • Можно отключить очередь, установив { queue: false }, тогда delay будет отсчитываться с момента вызова функции:
Velocity(element, { opacity: 1 }, { duration: 500, delay: 300, queue: false });

Итоговые рекомендации по использованию

  • Для плавных анимаций лучше использовать duration от 300 до 1000 мс.
  • Для синхронизации нескольких элементов комбинировать delay и duration.
  • Для динамических эффектов применять функции, возвращающие значения duration и delay.
  • Использовать предустановленные строки (fast, normal, slow) только для простых или быстрых анимаций.

Эффективное использование длительности и задержки в Velocity.js позволяет строить сложные анимационные сценарии с минимальным количеством кода и полной контролируемостью временных интервалов.

Оглавление