Именованные очереди

Механизм очередей в Velocity.js определяет порядок выполнения анимаций на одном и том же DOM-элементе. Каждая анимация не выполняется мгновенно (если не отключено явно), а помещается в очередь, которая последовательно обрабатывается движком.

По умолчанию используется стандартная очередь fx, унаследованная из концепции jQuery-анимаций. Это означает, что любые анимации, выполненные через Velocity без дополнительных настроек, выстраиваются в строгую последовательность.

Базовая очередь fx

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

Velocity(element, { opacity: 0.5 });
Velocity(element, { translateX: 200 });
Velocity(element, { rotateZ: 45 });

Все три анимации выполняются строго последовательно:

  1. изменение прозрачности
  2. смещение по оси X
  3. поворот

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

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

Поведение очереди можно отключить, передав параметр queue: false. В этом случае анимация запускается немедленно, параллельно с другими.

Velocity(element, { opacity: 0.2 }, { queue: false });
Velocity(element, { translateX: 300 }, { queue: false });

Обе анимации выполняются одновременно, без ожидания завершения друг друга.

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

Именованные очереди

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

Именованная очередь позволяет изолировать группы анимаций, чтобы они не влияли друг на друга.

Velocity(element, { translateX: 100 }, { queue: "effects" });
Velocity(element, { opacity: 0.3 }, { queue: "effects" });

В данном случае обе анимации попадут в очередь effects и будут выполняться последовательно внутри неё.

Параллельно можно использовать другую очередь:

Velocity(element, { rotateZ: 90 }, { queue: "transform" });
Velocity(element, { scale: 1.5 }, { queue: "transform" });

Очереди effects и transform выполняются независимо друг от друга.

Параллельные очереди на одном элементе

Каждая именованная очередь функционирует как отдельный стек задач. Это означает:

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

Пример:

Velocity(element, { opacity: 0 }, { queue: "fade" });
Velocity(element, { translateY: 100 }, { queue: "move" });
Velocity(element, { rotateZ: 180 }, { queue: "move" });
Velocity(element, { scale: 0.5 }, { queue: "fade" });

Результат:

  • очередь fade обрабатывает opacity → scale
  • очередь move обрабатывает translateY → rotateZ
  • обе очереди выполняются параллельно

Поведение завершения очереди

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

Например, визуальные эффекты могут быть отделены от геометрических преобразований:

Velocity(element, { backgroundColor: "#000" }, { queue: "style" });
Velocity(element, { translateX: 200 }, { queue: "geometry" });

Связь с колбэками begin и complete

При работе с именованными очередями колбэки остаются привязанными к конкретной анимации, а не к очереди в целом.

Velocity(element, {
  opacity: 0
}, {
  queue: "effects",
  begin: function() {
    // запуск конкретной анимации
  },
  complete: function() {
    // завершение конкретной анимации
  }
});

При этом очередь продолжает выполнение следующих задач независимо от колбэков отдельных шагов.

Использование queue в цепочках анимаций

Velocity поддерживает цепочки вызовов, где очереди позволяют контролировать порядок выполнения внутри цепочки.

Velocity(element, { translateX: 100 }, { queue: "fx" })
  .then(() => Velocity(element, { rotateZ: 45 }, { queue: "fx" }))
  .then(() => Velocity(element, { opacity: 0 }, { queue: "fx" }));

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

Влияние остановки очереди

Очереди можно принудительно останавливать. При этом поведение зависит от имени очереди.

Velocity(element, "stop", "effects");

Останавливается только очередь effects, в то время как другие очереди продолжают выполнение.

Это позволяет управлять анимациями независимо:

  • остановка визуальных эффектов
  • сохранение трансформаций
  • избирательное управление состояниями интерфейса

Приоритет очередей и логика планирования

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

Однако внутри одной очереди гарантируется строгий FIFO-порядок (first in, first out):

Velocity(element, { x: 10 }, { queue: "a" });
Velocity(element, { x: 20 }, { queue: "a" });
Velocity(element, { x: 30 }, { queue: "a" });

Результат всегда линейный: 10 → 20 → 30.

Использование очередей для UI-сценариев

Именованные очереди часто применяются для разделения типов анимаций в интерфейсах:

  • effects — визуальные эффекты (fade, glow, blur)
  • move — перемещения элементов
  • ui — интерфейсные переходы
  • state — изменение состояния компонентов
Velocity(element, { opacity: 1 }, { queue: "effects" });
Velocity(element, { translateX: 300 }, { queue: "move" });
Velocity(element, { scale: 1.2 }, { queue: "ui" });

Такое разделение снижает конфликтность анимаций и повышает предсказуемость поведения.

Особенности взаимодействия с DOM-элементами

Каждый DOM-элемент хранит собственные очереди. Это означает:

  • очереди не разделяются между элементами
  • одинаковые имена очередей на разных элементах не связаны
  • параллельные анимации на разных элементах полностью независимы
Velocity(elementA, { opacity: 0 }, { queue: "fx" });
Velocity(elementB, { opacity: 1 }, { queue: "fx" });

Обе операции выполняются независимо.

Пустые и динамически создаваемые очереди

При первом обращении к имени очереди, которой не существовало, она создаётся автоматически. Очередь не требует предварительной инициализации.

Velocity(element, { rotateZ: 360 }, { queue: "spin" });

Очередь spin создаётся на лету и начинает обработку первой добавленной задачи.

Сочетание queue: false и именованных очередей

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

Velocity(element, { opacity: 0.5 }, { queue: false });
Velocity(element, { translateX: 100 }, { queue: "motion" });
Velocity(element, { rotateZ: 45 }, { queue: "motion" });

Результат:

  • opacity изменяется мгновенно параллельно
  • motion выполняется последовательно
  • отсутствует блокировка между слоями анимаций

Типовые ошибки при работе с очередями

При использовании именованных очередей часто возникают следующие проблемы:

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

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

Оглавление