Настройка готовых эффектов

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

Внутри библиотеки выделяются два основных типа готовых эффектов:

  • стандартные shortcut-анимации (например, изменение opacity, translate, scale через строковые команды)
  • эффекты из Velocity UI Pack, оформленные как transition.*
  • пользовательские эффекты, созданные через Velocity.RegisterEffect

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

Shortcut-эффекты как базовый уровень готовых анимаций

Базовый слой готовых эффектов в Velocity.js выражается строковыми командами:

  • "fadeIn"
  • "fadeOut"
  • "slideUp"
  • "slideDown"
  • "slideLeft"
  • "slideRight"

Такие эффекты представляют собой сокращённую запись набора CSS-переходов. Например, fadeIn эквивалентен изменению прозрачности до opacity: 1 с предварительной установкой стартового значения 0.

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

Velocity(element, "fadeIn", {
  duration: 400
});

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

Velocity UI Pack и эффекты transition.*

Расширенный набор готовых эффектов предоставляется через Velocity UI Pack. Он вводит пространство имён transition.*, в котором содержатся более сложные анимации:

  • transition.fadeIn
  • transition.fadeOut
  • transition.slideUpIn
  • transition.slideDownOut
  • transition.flipXIn
  • transition.flipYOut
  • transition.shrinkIn
  • transition.expandOut

Эти эффекты включают многослойные трансформации, сочетая opacity, translate, scale, rotate и иногда 3D-движение.

Пример применения:

Velocity(element, "transition.slideUpIn", {
  duration: 600,
  easing: "easeOutCubic"
});

В отличие от базовых shortcut-эффектов, transition.* часто содержит:

  • начальные и конечные keyframes
  • преднастроенные easing-кривые
  • оптимизированные значения transform-origin
  • согласованное поведение при обратных анимациях

Структура параметров настройки готовых эффектов

Любой готовый эффект в Velocity.js может быть модифицирован через объект параметров, который передаётся третьим аргументом вызова.

Ключевые параметры:

duration

Определяет длительность анимации в миллисекундах.

Velocity(element, "transition.fadeIn", {
  duration: 300
});

Длительность влияет на воспринимаемую «плотность» эффекта и масштабирует временную кривую без изменения логики ключевых кадров.

delay

Добавляет задержку перед стартом анимации.

Velocity(element, "slideDown", {
  delay: 200
});

Задержка применяется до начала вычисления первого кадра, не влияя на длительность самого эффекта.

easing

Определяет функцию временного распределения скорости анимации.

Velocity(element, "transition.flipXIn", {
  easing: "ease-in-out"
});

Поддерживаются как стандартные CSS easing-строки, так и кастомные функции Bezier-кривых. В Velocity easing применяется ко всему набору ключевых кадров эффекта.

loop и repeat

Позволяют зациклить готовую анимацию.

Velocity(element, "fadeIn", {
  loop: true
});

или

Velocity(element, "fadeIn", {
  repeat: 3
});

loop создаёт бесконечное повторение, в то время как repeat задаёт конечное число циклов.

display и visibility

Управляют состоянием элемента до и после анимации.

Velocity(element, "slideUp", {
  display: "block",
  visibility: "visible"
});

display особенно важен для эффектов появления, где элемент может быть скрыт через display: none.

begin и complete

Позволяют подключать колбэки к жизненному циклу анимации.

Velocity(element, "transition.expandOut", {
  begin: function () {
    console.log("start");
  },
  complete: function () {
    console.log("end");
  }
});

begin вызывается до первого кадра, complete — после завершения всех вычислений и применения финального состояния.

progress

Используется для отслеживания состояния анимации в реальном времени.

Velocity(element, "slideLeft", {
  progress: function(elements, percentComplete) {
    // percentComplete от 0 до 1
  }
});

Переопределение параметров готовых эффектов

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

Например, transition.slideUpIn может содержать внутренние keyframes, но внешний вызов позволяет переопределить:

  • длительность
  • easing
  • задержку
  • поведение display
Velocity(element, "transition.slideUpIn", {
  duration: 1000,
  easing: [0.25, 0.1, 0.25, 1.0]
});

При этом оригинальная конфигурация эффекта остаётся неизменной, а параметры накладываются поверх базовой схемы.

Последовательное применение готовых эффектов

Velocity позволяет выстраивать цепочки анимаций, где готовые эффекты выполняются последовательно:

Velocity(element, "transition.fadeIn", { duration: 300 })
  .then(() => Velocity(element, "slideUp", { duration: 300 }))
  .then(() => Velocity(element, "transition.flipXIn", { duration: 500 }));

Каждый эффект завершает свой цикл перед запуском следующего, формируя композицию анимационных состояний.

Дополнительно используется очередь queue, позволяющая управлять параллельным или последовательным выполнением.

Stagger-распределение готовых эффектов

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

Velocity(elements, "transition.fadeIn", {
  stagger: 100
});

Каждый следующий элемент получает смещение старта относительно предыдущего. Это создаёт эффект каскадного появления или исчезновения.

Stagger работает поверх базовой модели эффекта и не требует модификации самой анимации.

Комбинация transform-эффектов внутри transition.*

Внутренне эффекты transition.* часто комбинируют несколько CSS-преобразований:

  • translateX / translateY
  • scale
  • rotateX / rotateY
  • opacity

Например, transition.flipYIn может включать:

  • начальный поворот по оси Y
  • уменьшенную прозрачность
  • масштабирование

При этом Velocity синхронизирует изменения в единый поток кадров, предотвращая рассинхронизацию transform-свойств.

Регистрация собственных готовых эффектов

Velocity предоставляет механизм создания новых эффектов через Velocity.RegisterEffect.

Структура регистрации включает:

  • набор свойств (property map)
  • массив keyframes
  • опциональные параметры конфигурации
Velocity.RegisterEffect("custom.zoomIn", {
  defaultDuration: 500,
  calls: [
    [{ scale: 1.2, opacity: 0.5 }, 0],
    [{ scale: 1, opacity: 1 }, 1]
  ]
});

После регистрации эффект становится доступным как строковый идентификатор:

Velocity(element, "custom.zoomIn", {
  duration: 700
});

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

Переопределение defaultDuration и внутренних calls

В зарегистрированных эффектах ключевым элементом является массив calls. Каждый элемент массива определяет:

  • конечное состояние свойств
  • относительную длительность шага
calls: [
  [{ opacity: 0, translateY: 20 }, 0.3],
  [{ opacity: 1, translateY: 0 }, 0.7]
]

Соотношение значений определяет распределение времени между этапами анимации.

defaultDuration применяется, если при вызове эффекта не задана длительность явно.

Глобальные настройки и влияние на готовые эффекты

Velocity поддерживает глобальные настройки, влияющие на поведение всех готовых эффектов:

  • Velocity.defaults.duration
  • Velocity.defaults.easing
  • Velocity.defaults.queue

Эти значения используются как fallback, если в вызове эффекта не задан локальный параметр.

Velocity.defaults.duration = 400;
Velocity.defaults.easing = "easeOutQuart";

Готовые эффекты в этом случае наследуют общие параметры, сохраняя собственные keyframes.

Особенности поведения готовых эффектов при повторных вызовах

При повторном запуске одного и того же эффекта на элементе учитываются:

  • текущее состояние transform и opacity
  • активные очереди анимаций
  • наличие незавершённых tween-процессов

Velocity автоматически корректирует стартовые значения, чтобы избежать резких скачков между состояниями.

Взаимодействие готовых эффектов с display-логикой

Эффекты появления и исчезновения тесно связаны с управлением display.

При использовании fadeOut или transition.slideUpOut происходит:

  • плавное изменение opacity
  • анимация transform
  • установка display: none после завершения
Velocity(element, "transition.fadeOut", {
  duration: 300,
  display: "none"
});

Такое поведение позволяет сохранять DOM-структуру без ручного управления видимостью.

Согласованность готовых эффектов в UI-композициях

При использовании нескольких эффектов в интерфейсе важно, что Velocity синхронизирует:

  • временные кривые
  • transform-матрицы
  • opacity-канал
  • очередь исполнения

Это обеспечивает визуальную согласованность между различными transition.* эффектами и базовыми shortcut-анимациями даже при их комбинировании в одной последовательности.

Оглавление