UI Pack расширяет возможности Velocity.js, добавляя набор предустановленных эффектов переходов и утилит для анимаций интерфейса. Базовая библиотека Velocity ориентирована на высокопроизводительное управление анимациями DOM, тогда как UI Pack предоставляет слой готовых анимационных паттернов: появления, исчезновения, переходы страниц, последовательности и сложные сценические эффекты.
UI Pack не является самостоятельной библиотекой и работает только
поверх Velocity. В современных сборках используется пакет
velocity-animate, который содержит ядро анимационного
движка.
Ключевое требование — наличие установленного Velocity:
velocity-animate)velocity-animate/velocity.ui
или отдельный модуль в зависимости от сборки)При подключении через модульную систему важно учитывать, что UI Pack регистрирует дополнительные эффекты внутри глобального реестра Velocity. Это означает, что порядок инициализации критичен: сначала загружается ядро, затем расширение.
В среде Node.js или сборщиках вроде Webpack, Vite или Rollup установка выполняется через пакетный менеджер.
npm install velocity-animateПосле установки подключение UI Pack выполняется одним из способов, зависящих от версии пакета.
import Velocity from "velocity-animate";
import "velocity-animate/velocity.ui";После импорта UI Pack автоматически регистрирует набор эффектов внутри экземпляра Velocity. Дополнительной инициализации не требуется.
В проектах с ES Modules важно учитывать, что UI Pack может изменять прототип Velocity глобально. Это означает, что при нескольких экземплярах Velocity в разных частях приложения эффекты могут быть недоступны, если импорт выполнен не в корневом модуле.
Для проектов без сборщика используется подключение через script-теги. Порядок подключения строго фиксирован.
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2/velocity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@2/velocity.ui.min.js"></script>Первым загружается ядро, затем UI Pack. Нарушение порядка приводит к отсутствию регистрации эффектов.
После загрузки UI Pack расширяет глобальный объект
Velocity новыми предустановленными анимациями.
UI Pack добавляет несколько категорий анимаций:
Каждая категория представляет собой именованные эффекты, которые передаются как строковый параметр в Velocity.
Пример использования:
Velocity(element, "transition.fadeIn", { duration: 300 });Или:
Velocity(element, "transition.slideUpIn", { duration: 400 });UI Pack работает через расширение внутреннего реестра эффектов Velocity. При подключении выполняется регистрация набора предопределённых ключей.
Каждый эффект представляет собой объект конфигурации:
Эти эффекты становятся доступны как строковые идентификаторы, что упрощает вызов и стандартизирует анимации интерфейса.
В некоторых сборках UI Pack может быть разбит на модули. Это позволяет уменьшить размер бандла за счёт подключения только необходимых эффектов.
Пример частичной загрузки:
import Velocity from "velocity-animate";
import "velocity-animate/velocity.ui/pack/fade";
import "velocity-animate/velocity.ui/pack/slide";Такой подход уменьшает количество загружаемых анимаций и ускоряет инициализацию интерфейса в больших приложениях.
При подключении через CDN UI Pack автоматически добавляет методы в
глобальный объект Velocity. Это означает, что любые
DOM-элементы становятся анимируемыми без дополнительной настройки.
Пример:
Velocity(document.querySelector(".box"), "transition.expandIn", 500);Расширение также добавляет поддержку последовательностей:
Velocity(document.querySelectorAll(".item"), "transition.staggerIn", {
stagger: 100
});UI Pack зависит от внутреннего API регистрации эффектов. При неправильной последовательности загрузки возникают следующие проблемы:
Корректный порядок:
В Webpack или Vite UI Pack может попадать в основной бандл или быть выделен в отдельный chunk.
Пример конфигурации импорта:
import Velocity from "velocity-animate";
import "velocity-animate/velocity.ui";Для ленивой загрузки можно использовать динамический импорт:
const loadUI = async () => {
await import("velocity-animate/velocity.ui");
};После выполнения такого импорта эффекты становятся доступны глобально в рамках текущего контекста выполнения.
UI Pack не ограничивает возможность добавления собственных анимаций. Новые эффекты могут регистрироваться поверх существующего API Velocity:
Velocity.RegisterEffect("custom.bounceIn", {
defaultDuration: 600,
calls: [
[{ scale: 1.2 }, 0.5],
[{ scale: 1 }, 0.5]
]
});После регистрации такой эффект становится доступен наравне со встроенными UI Pack эффектами.
UI Pack тесно интегрирован с системой chaining Velocity. Это позволяет выстраивать сложные сценарии без ручного управления таймингами.
Velocity(element, "transition.fadeIn")
.then(() => Velocity(element, "transition.flipXIn"))
.then(() => Velocity(element, "transition.shrinkOut"));UI Pack обеспечивает корректную работу цепочек за счёт синхронизации промисов и callback-механизма Velocity.
UI Pack использует те же оптимизации, что и ядро Velocity:
При подключении большого количества UI эффектов важно учитывать, что каждый дополнительный пакет увеличивает размер JavaScript-бандла, но не влияет напрямую на runtime-производительность, так как эффекты компилируются в момент выполнения.
Если CSS-свойство не поддерживается браузером, Velocity автоматически заменяет его аналогом или пропускает анимацию. UI Pack наследует эту модель, добавляя предопределённые безопасные комбинации свойств.
Пример:
UI Pack часто применяется в интерфейсах с высокой плотностью взаимодействий:
Каждый из этих сценариев использует комбинации встроенных эффектов UI Pack, объединённых в последовательности и цепочки.
UI Pack не изменяет DOM напрямую, а работает через слой абстракции Velocity. Это позволяет:
Регистрация эффектов происходит один раз при загрузке, после чего они доступны глобально в рамках текущего контекста выполнения приложения.