Vanilla JavaScript подход

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

Подключение и базовая инициализация

При использовании без сборщиков библиотека подключается через <script> и становится доступной глобально:

<script src="velocity.min.js"></script>

После этого основной API доступен через функцию Velocity.

Сигнатура вызова

Базовый вызов имеет следующий вид:

Velocity(element, properties, options);
  • element — DOM-элемент, NodeList или массив элементов
  • properties — объект CSS-свойств для анимации
  • options — объект настроек

Пример:

const box = document.querySelector('.box');

Velocity(box, {
  opacity: 1,
  translateX: '200px'
}, {
  duration: 1000,
  easing: 'ease-in-out'
});

Работа с DOM-элементами

Velocity.js принимает различные типы коллекций:

// Один элемент
Velocity(document.getElementById('item'), { opacity: 0 });

// NodeList
Velocity(document.querySelectorAll('.items'), { scale: 1.2 });

// Массив
Velocity([el1, el2, el3], { rotateZ: '45deg' });

Библиотека автоматически нормализует входные данные, избавляя от необходимости ручной итерации.

Поддерживаемые свойства

Velocity.js расширяет стандартный CSS, позволяя работать с трансформациями напрямую:

Velocity(el, {
  translateX: '50px',
  translateY: '100px',
  scale: 1.5,
  rotateZ: '180deg'
});

Ключевые особенности:

  • Нет необходимости использовать transform
  • Каждое свойство обрабатывается отдельно
  • Поддерживается аппаратное ускорение (GPU)

Единицы измерения и автоматическая интерполяция

Velocity автоматически интерполирует значения:

Velocity(el, {
  width: '300px',   // px
  opacity: 0.5,     // число
  rotateZ: '90deg'  // градусы
});

Если начальное значение отсутствует, библиотека вычисляет его через getComputedStyle.

Параметры анимации

Объект options предоставляет широкий набор настроек:

Velocity(el, { opacity: 1 }, {
  duration: 500,
  delay: 100,
  easing: 'linear',
  loop: 2
});

Основные параметры:

  • duration — длительность (в мс)
  • delay — задержка перед началом
  • easing — функция сглаживания
  • loop — количество повторов
  • begin — callback при старте
  • complete — callback при завершении

Callback-функции

Позволяют встроить анимацию в бизнес-логику:

Velocity(el, { opacity: 1 }, {
  begin: () => {
    console.log('Старт');
  },
  complete: () => {
    console.log('Завершение');
  }
});

Цепочки анимаций

Velocity поддерживает последовательное выполнение через Promise:

Velocity(el, { opacity: 0 })
  .then(() => Velocity(el, { translateX: '100px' }))
  .then(() => Velocity(el, { scale: 2 }));

Альтернативный вариант — массив:

Velocity(el, [
  { opacity: 0 },
  { translateX: '100px' },
  { scale: 2 }
]);

Управление очередями

По умолчанию анимации ставятся в очередь:

Velocity(el, { opacity: 0 });
Velocity(el, { opacity: 1 });

Они выполнятся последовательно.

Отключение очереди:

Velocity(el, { opacity: 0 }, { queue: false });

Создание пользовательской очереди:

Velocity(el, { opacity: 0 }, { queue: 'custom' });
Velocity(el, { translateX: '50px' }, { queue: 'custom' });

Velocity.Utilities.dequeue(el, 'custom');

Остановка и управление состоянием

Velocity предоставляет методы контроля:

Velocity(el, 'stop');
Velocity(el, 'finish');
Velocity(el, 'pause');
Velocity(el, 'resume');

Различия:

  • stop — останавливает и сбрасывает
  • finish — мгновенно завершает
  • pause/resume — временная остановка

Работа с display и visibility

Velocity может управлять видимостью:

Velocity(el, { opacity: 1 }, { display: 'block' });
Velocity(el, { opacity: 0 }, { display: 'none' });

Это избавляет от ручного переключения CSS.

Scroll-анимации

Поддержка прокрутки:

Velocity(document.body, 'scroll', {
  offset: 300,
  duration: 800
});

Для контейнеров:

Velocity(container, 'scroll', {
  container: container,
  offset: 200
});

Анимация цветов

Velocity интерполирует цвета:

Velocity(el, {
  backgroundColor: '#ff0000',
  color: '#ffffff'
});

Поддерживаются:

  • HEX
  • RGB
  • RGBA

Пользовательские easing-функции

Можно задавать собственные кривые:

Velocity(el, { translateX: '100px' }, {
  easing: [0.42, 0, 0.58, 1] // cubic-bezier
});

Или использовать spring:

Velocity(el, { translateX: '100px' }, {
  easing: 'spring'
});

Производительность и оптимизация

Batch-анимации

Velocity автоматически группирует операции, снижая количество reflow:

Velocity(elements, { opacity: 0.5 });

Использование transform

Рекомендуется использовать:

  • translate
  • scale
  • rotate

вместо:

  • top / left

Это снижает нагрузку на layout.

Работа с requestAnimationFrame

Velocity использует requestAnimationFrame внутри, обеспечивая:

  • синхронизацию с рендерингом
  • плавность
  • минимизацию лагов

Анимация SVG

Поддержка SVG-элементов:

Velocity(svgPath, {
  strokeDashoffset: 0
});

Хуки (Hooks)

Velocity позволяет обращаться к вложенным свойствам:

Velocity(el, {
  translateX: '100px',
  rotateZ: '45deg'
});

Внутренне это превращается в:

transform: translateX(...) rotateZ(...)

Работа с классами через JS

Вместо CSS-классов можно управлять состояниями напрямую:

function show(el) {
  Velocity(el, { opacity: 1, scale: 1 });
}

function hide(el) {
  Velocity(el, { opacity: 0, scale: 0.8 });
}

Асинхронное управление

Совместимо с async/await:

async function animate() {
  await Velocity(el, { opacity: 0 });
  await Velocity(el, { opacity: 1 });
}

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

Можно изменить поведение по умолчанию:

Velocity.defaults.duration = 400;
Velocity.defaults.easing = 'ease-in';

Расширение через утилиты

Velocity содержит вспомогательные методы:

Velocity.Utilities.each(elements, (i, el) => {
  console.log(el);
});

Интеграция с нативным JS-кодом

Velocity легко комбинируется с обработчиками событий:

button.addEventListener('click', () => {
  Velocity(panel, { height: '200px' });
});

Или с MutationObserver:

const observer = new MutationObserver(() => {
  Velocity(el, { opacity: 1 });
});

Работа с динамическими значениями

Значения могут быть функциями:

Velocity(el, {
  width: () => window.innerWidth / 2
});

Режимы отображения (display logic)

Velocity учитывает текущее состояние:

Velocity(el, 'fadeIn');
Velocity(el, 'fadeOut');

Это шорткаты встроенных эффектов.

Переиспользование конфигураций

const fadeIn = {
  opacity: 1,
  duration: 300
};

Velocity(el1, fadeIn);
Velocity(el2, fadeIn);

Организация кода без фреймворков

Vanilla-подход предполагает:

  • минимальную абстракцию
  • прямую работу с DOM
  • контроль над состоянием вручную

Пример модуля:

export function animateOpen(el) {
  return Velocity(el, {
    height: '200px',
    opacity: 1
  });
}

Отладка анимаций

Velocity поддерживает логирование:

Velocity.debug = true;

Это позволяет отслеживать:

  • очереди
  • вызовы
  • производительность

Особенности Vanilla-подхода

  • отсутствие зависимости от React/Vue
  • максимальная производительность
  • полный контроль над DOM
  • меньше магии, больше предсказуемости

В результате Velocity.js в сочетании с чистым JavaScript становится мощным инструментом для создания сложных анимаций без необходимости подключения тяжёлых UI-фреймворков.

Оглавление