Базовые CSS-свойства для анимации

Velocity.js — это библиотека для JavaScript, обеспечивающая высокопроизводительные анимации, совместимые с современными браузерами. Она работает поверх CSS и JavaScript, предоставляя простой и гибкий API для анимирования HTML-элементов. В основе Velocity лежит управление CSS-свойствами, что позволяет создавать плавные переходы и сложные эффекты без необходимости писать низкоуровневый код с requestAnimationFrame.

Работа с CSS-свойствами

Velocity.js использует объект свойств для задания анимации. Каждое свойство соответствует CSS-параметру, который нужно анимировать. Основная структура вызова выглядит так:

Velocity(element, { property1: value1, property2: value2 }, { duration: 1000, easing: "ease-in-out" });
  • element — DOM-элемент или коллекция элементов, к которым применяется анимация.
  • { property: value } — объект CSS-свойств, которые будут изменяться.
  • { duration, easing } — объект с параметрами анимации, такими как продолжительность, функция сглаживания и задержка.

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

Velocity.js поддерживает как стандартные CSS-свойства, так и свойства трансформации. Среди ключевых категорий:

Позиционирование

  • top, left, right, bottom — управляют положением элемента относительно родителя.
  • margin, marginTop, marginLeft, marginRight, marginBottom — задают внешние отступы.
  • padding и отдельные стороны paddingTop и т.д. — внутренние отступы.

Размеры

  • width, height — размеры элемента.
  • maxWidth, maxHeight, minWidth, minHeight — ограничения размеров.
  • fontSize — размер шрифта.

Прозрачность и видимость

  • opacity — степень прозрачности (0 — полностью прозрачный, 1 — полностью видимый).
  • display и visibility — изменение видимости элементов в DOM может использоваться вместе с анимацией opacity.

Цвет и фон

  • color — цвет текста.
  • backgroundColor — цвет фона.
  • borderColor, borderWidth, borderRadius — стили рамок и скругления углов.

Трансформации

Velocity.js имеет встроенную поддержку CSS-трансформаций через свойства:

  • translateX, translateY, translateZ — смещение по координатам.
  • rotateZ, rotateX, rotateY — поворот элемента.
  • scale, scaleX, scaleY — масштабирование.
  • skewX, skewY — наклон.

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

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

Использование относительных значений

Velocity.js позволяет задавать значения в относительной форме. Например, "+=50px" означает увеличение текущего значения на 50 пикселей, а "-=20px" — уменьшение. Это упрощает создание динамических эффектов без точного расчета начального состояния элемента.

Velocity(element, { left: "+=100px", opacity: "-=0.3" }, { duration: 800 });

Плавность анимации через функции сглаживания

Easing-функции управляют темпом анимации. Velocity.js поддерживает стандартные CSS-easing, а также собственные функции:

  • "linear" — равномерная скорость.
  • "ease-in" — ускорение в начале анимации.
  • "ease-out" — замедление к концу.
  • "ease-in-out" — комбинированное ускорение и замедление.
  • Пользовательские кривые Безье: "cubic-bezier(0.42, 0, 0.58, 1)".

Пример с пользовательским easing:

Velocity(element, { width: "300px" }, { duration: 1000, easing: "cubic-bezier(0.68, -0.55, 0.27, 1.55)" });

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

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

Velocity(element, {
    opacity: 0.5,
    height: "200px",
    borderRadius: "20px"
}, { duration: 1500, easing: "ease-in-out" });

Управление последовательностью анимаций

Velocity.js поддерживает очереди анимаций. Свойство queue позволяет добавлять анимации в последовательность, выполняя их одну за другой:

Velocity(element, { opacity: 0.5 }, { duration: 500, queue: "customQueue" });
Velocity(element, { height: "300px" }, { duration: 700, queue: "customQueue" });
Velocity.Utilities.dequeue(element, "customQueue");

Анимация с обратной связью

Velocity.js позволяет задавать колбэки для отслеживания состояния анимации:

  • begin — вызывается в начале анимации.
  • progress — вызывается на каждом шаге анимации.
  • complete — вызывается по завершении анимации.
Velocity(element, { width: "400px" }, {
    duration: 1000,
    complete: function() {
        console.log("Анимация завершена");
    }
});

Итоговое использование CSS-свойств

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

Ключевые моменты:

  • Любое CSS-свойство можно анимировать, включая трансформации и цвета.
  • Использование относительных значений и очередей упрощает динамическое управление.
  • Easing-функции позволяют настроить темп анимации для реалистичных эффектов.
  • Колбэки и события обеспечивают контроль за ходом анимации и её синхронизацию с другими действиями.
Оглавление