Синтаксис вызова функции

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

Стандартный синтаксис

Velocity(element, properties, options);
  • element — DOM-элемент или коллекция элементов, к которым применяется анимация. Может быть передан как одиночный элемент, массив или NodeList.
  • properties — объект CSS-свойств и значений, к которым следует анимировать элемент. Например:
{
    opacity: 0.5,
    width: "300px",
    translateX: "100px"
}
  • options — объект с дополнительными настройками анимации: длительность, задержка, easing, колбэки и другие параметры.

Примеры вызова

Базовая анимация с изменением прозрачности:

Velocity(document.getElementById("box"), { opacity: 0.5 }, { duration: 1000 });

Анимация с изменением нескольких свойств:

Velocity(
    document.querySelectorAll(".item"),
    { 
        width: "200px", 
        height: "100px", 
        rotateZ: "45deg" 
    },
    { duration: 800, easing: "ease-in-out" }
);

Настройки анимации через объект options

Ключевые параметры объекта options:

  • duration — длительность анимации в миллисекундах (по умолчанию 400).
  • easing — тип кривой движения. Velocity поддерживает стандартные CSS-easing, а также свои расширенные функции, например: easeIn, easeOut, spring.
  • delay — задержка перед стартом анимации.
  • loop — число повторов анимации или true для бесконечного повторения.
  • begin — функция-колбэк, вызываемая при старте анимации.
  • complete — функция-колбэк, вызываемая по завершении анимации.
  • progress — функция, вызываемая при каждом кадре анимации, позволяет отслеживать текущий прогресс (0–100%).

Пример с колбэками:

Velocity(
    "#circle",
    { scale: 1.5, opacity: 0.7 },
    {
        duration: 1200,
        easing: "spring",
        begin: function() {
            console.log("Анимация началась");
        },
        complete: function() {
            console.log("Анимация завершена");
        }
    }
);

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

Velocity.js поддерживает последовательные вызовы анимаций через массив объектов. Каждая анимация запускается после завершения предыдущей.

Velocity("#box", [
    { opacity: 0.5, duration: 500 },
    { translateX: "100px", duration: 700 },
    { rotateZ: "90deg", duration: 600 }
]);

Также можно комбинировать с функцией then для управления цепочками:

Velocity("#box", { opacity: 0.3 }, { duration: 400 })
    .then({ translateY: "50px" }, { duration: 600 })
    .then({ scale: 1.2 }, { duration: 500 });

Работа с селекторами и коллекциями

  • Velocity принимает одиночные элементы, массивы элементов и селекторы, что делает его совместимым с любым DOM API:
Velocity(document.querySelectorAll(".item"), { opacity: 0 }, { duration: 500 });
  • Для применения анимации к группе элементов одновременно используется одинаковый объект свойств. Для индивидуальных анимаций на каждый элемент можно использовать цикл.

Анимация с использованием CSS-свойств и трансформаций

Velocity.js умеет анимировать практически любые CSS-свойства, включая числовые значения (width, height, opacity), цвета (backgroundColor, color) и трансформации (translateX, translateY, rotateZ, scale).

Пример комбинированной трансформации:

Velocity("#square", 
    { translateX: "200px", rotateZ: "45deg", scale: 1.5 }, 
    { duration: 1000, easing: "easeInOutQuad" }
);
  • Можно указывать относительные значения с += или -= для анимации относительно текущего состояния:
Velocity("#box", { left: "+=50px" }, { duration: 600 });

Анимация с промисами

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

async function animateBox() {
    await Velocity("#box", { opacity: 0.5 }, { duration: 500 }).promise();
    await Velocity("#box", { translateY: "100px" }, { duration: 700 }).promise();
}
animateBox();

Специальные команды Velocity

Помимо базового вызова Velocity(element, properties, options), есть вспомогательные команды:

  • stop — прекращает текущую анимацию:
Velocity("#box", "stop");
  • reverse — обращает текущую анимацию:
Velocity("#box", "reverse");
  • finish — мгновенно завершает анимацию:
Velocity("#box", "finish");
  • hook — получение или установка значения CSS-свойства без анимации.

Эти команды делают Velocity гибкой и мощной библиотекой для создания сложных анимаций с минимальным кодом.

Оглавление