Что такое Velocity.js

Velocity.js — это высокопроизводительная библиотека для анимации в JavaScript, которая сочетает простоту jQuery-анимаций с мощью CSS-трансформаций и GPU-ускоренной анимации. Она обеспечивает точный контроль над анимацией, поддерживает цепочки вызовов, коллбэки, параллельные и последовательные анимации, а также сложные кривые временной функции (easing).

В отличие от стандартного метода element.style или jQuery.animate(), Velocity.js использует оптимизированные алгоритмы интерполяции, что позволяет анимировать не только числовые свойства, но и трансформации и цвета с высокой производительностью.

Подключение и базовый синтаксис

Velocity.js может быть подключен через CDN или локальный файл. Основной синтаксис для анимации выглядит так:

Velocity(element, { 
  properties: values, 
  options: settings 
});
  • element — DOM-элемент или коллекция элементов, которые будут анимированы.
  • properties — объект с CSS-свойствами и их конечными значениями.
  • options — объект с настройками анимации, включая продолжительность, easing, задержку и коллбэки.

Пример базовой анимации перемещения элемента:

Velocity(document.getElementById("box"), {
  left: "500px",
  opacity: 0.5
}, {
  duration: 1000,
  easing: "ease-in-out"
});

Здесь duration задаёт продолжительность в миллисекундах, а easing определяет кривую изменения значений с течением времени.

Работа с easing

Easing — это функция, определяющая темп изменения свойства во времени. Velocity.js поддерживает как предустановленные функции (linear, ease-in, ease-out, ease-in-out), так и пользовательские кривые Безье:

Velocity(element, { width: "300px" }, { duration: 1000, easing: [0.42, 0, 0.58, 1] });

В массиве [x1, y1, x2, y2] задаются контрольные точки кривой Безье, обеспечивая полный контроль над ускорением и замедлением анимации.

Анимация трансформаций

Velocity.js позволяет анимировать CSS-трансформации напрямую без использования дополнительных библиотек. Среди поддерживаемых трансформаций: translateX, translateY, scale, rotate и их комбинации:

Velocity(element, {
  translateX: "200px",
  rotateZ: "45deg",
  scale: 1.5
}, { duration: 1200, easing: "ease-out" });

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

Цепочки и последовательные анимации

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

Velocity(element, { opacity: 0 }, { duration: 500 })
  .then(() => Velocity(element, { translateY: "100px" }, { duration: 800 }))
  .then(() => Velocity(element, { opacity: 1 }, { duration: 500 }));

Такой подход заменяет вложенные коллбэки, делая код более читаемым и управляемым.

Параллельные анимации

Для одновременного запуска нескольких анимаций можно передавать массив элементов или использовать одно и то же свойство на разных элементах:

Velocity([element1, element2], { opacity: 0.5, left: "100px" }, { duration: 1000 });

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

Коллбэки и события

Velocity.js предоставляет гибкую систему коллбэков для управления анимациями:

  • begin — вызывается в начале анимации
  • progress — вызывается в процессе анимации
  • complete — вызывается после завершения анимации
  • loop — вызывается при каждом повторении анимации (если включён loop)

Пример:

Velocity(element, { opacity: 0 }, {
  duration: 800,
  begin: () => console.log("Начало анимации"),
  complete: () => console.log("Анимация завершена")
});

Работа с цветами и сложными свойствами

Velocity.js умеет анимировать CSS-цвета (backgroundColor, color, borderColor) и шрифтовые свойства. Цвета могут задаваться в формате HEX, RGB или HSL, а Velocity.js автоматически интерполирует их по шагам:

Velocity(element, { backgroundColor: "#ff0000" }, { duration: 1000 });

Для шрифтов можно анимировать fontSize, letterSpacing и другие числовые свойства:

Velocity(element, { fontSize: "24px", letterSpacing: "2px" }, { duration: 1200 });

Использование Velocity.UI

Velocity.js включает модуль Velocity.UI, расширяющий возможности за счёт предопределённых эффектов (fade, slide, transition). Это ускоряет создание анимаций без ручного задания всех свойств:

Velocity(element, "transition.fadeIn", { duration: 600 });
Velocity(element, "transition.slideDownIn", { duration: 800 });

Каждый эффект представляет собой заранее настроенную комбинацию CSS-свойств и easing-функций, что облегчает создание анимаций для интерфейсов.

Настройка продолжительности и повторений

  • duration — задаёт время анимации
  • delay — задержка перед началом
  • loop — повторение анимации указанное количество раз или бесконечно

Пример бесконечной анимации:

Velocity(element, { rotateZ: "360deg" }, { duration: 2000, loop: true, easing: "linear" });

Интеграция с промисами и async/await

Velocity.js возвращает объект-подобный промис, что позволяет использовать синтаксис async/await:

async function animateBox() {
  await Velocity(element, { opacity: 0.5 }, { duration: 500 });
  await Velocity(element, { translateX: "200px" }, { duration: 700 });
  await Velocity(element, { opacity: 1 }, { duration: 500 });
}

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

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

Оглавление