Параллельное выполнение анимаций

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

Запуск нескольких анимаций одновременно

Для выполнения нескольких анимаций параллельно можно вызвать функцию Velocity на разных элементах без использования цепочек .then() или колбэков. Каждая анимация будет выполняться независимо:

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

Velocity(document.getElementById("box2"), { 
    scale: 1.5, 
    rotateZ: "45deg" 
}, { duration: 1000 });

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

Использование групповых анимаций

Velocity.js поддерживает параллельные анимации для групп элементов с помощью селекторов или массивов:

Velocity(document.querySelectorAll(".boxes"), { 
    translateY: 100, 
    opacity: 0.8 
}, { duration: 1200 });

Все элементы с классом .boxes будут анимированы одновременно, что значительно упрощает создание согласованных визуальных эффектов на странице.

Комбинирование последовательных и параллельных анимаций

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

Velocity(document.getElementById("box3"), { 
    left: "200px" 
}, { duration: 800, queue: false });

Velocity(document.getElementById("box3"), { 
    top: "150px" 
}, { duration: 800 });

Первое свойство left анимируется без очереди (queue: false), параллельно с другими анимациями на странице. Второе свойство top будет выполнено после завершения текущей анимации элемента, так как по умолчанию queue: true.

Настройка задержки и синхронизации

Velocity позволяет управлять временем запуска анимаций через параметр delay, что удобно при создании сложных сцен с параллельными эффектами:

Velocity("#box1", { scale: 1.2 }, { duration: 1000, delay: 200 });
Velocity("#box2", { scale: 0.8 }, { duration: 1000, delay: 200 });

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

Использование Velocity.animate с массивами для параллельных анимаций

Для одновременной анимации нескольких свойств одного элемента можно передавать массивы:

Velocity(document.getElementById("box4"), [
    { opacity: 0.5, translateX: 100 },
    { rotateZ: "90deg", scale: 1.5 }
], { duration: 1500 });

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

Особенности управления производительностью

  • Асинхронность анимаций: Velocity использует requestAnimationFrame, что обеспечивает плавность без блокировки UI.
  • Отключение очередей: queue: false позволяет запускать анимации полностью параллельно без ожидания завершения предыдущих.
  • Оптимизация массивов: Анимации нескольких элементов через селекторы обрабатываются внутренне как единый вызов, снижая нагрузку на основной поток.

Практическое применение

Параллельные анимации применяются для:

  • Одновременного движения и трансформации нескольких элементов интерфейса.
  • Синхронизации эффектов появления и исчезновения блоков.
  • Создания динамичных интерфейсов с комплексными переходами.
  • Построения визуальных историй или сцен, где несколько объектов движутся одновременно.

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

Оглавление