Цепочки анимаций

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

Последовательное выполнение анимаций

Для последовательного выполнения нескольких анимаций используется метод Velocity с массивом объектов анимаций, где каждая следующая анимация стартует после завершения предыдущей:

Velocity(element, { opacity: 0 }, { duration: 500 })
  .then(() => Velocity(element, { translateX: "100px" }, { duration: 700 }))
  .then(() => Velocity(element, { rotateZ: "45deg" }, { duration: 600 }));

Особенности последовательного выполнения:

  • Каждый вызов Velocity возвращает Promise.
  • then() позволяет выполнять следующую анимацию только после завершения предыдущей.
  • Можно объединять свойства CSS и параметры анимации внутри отдельных вызовов.

Параллельные анимации

Velocity.js позволяет запускать несколько анимаций одновременно, используя один объект с несколькими свойствами:

Velocity(element, { 
    opacity: 1, 
    translateX: "200px", 
    rotateZ: "90deg" 
}, { duration: 1000 });

Параллельные анимации обеспечивают:

  • Одновременное изменение нескольких свойств.
  • Возможность комбинировать трансформации с изменением цветов и размеров.
  • Полный контроль через параметры duration, easing и delay.

Использование параметра sequence

Для управления цепочками анимаций можно использовать параметр sequence, который принимает массив анимаций с указанием цели и опций:

Velocity.RunSequence([
    { e: element, p: { opacity: 0 }, o: { duration: 500 } },
    { e: element, p: { translateX: "100px" }, o: { duration: 700 } },
    { e: element, p: { rotateZ: "45deg" }, o: { duration: 600 } }
]);

Преимущества RunSequence:

  • Удобно для сложных анимаций с несколькими элементами.
  • Позволяет легко вставлять задержки между шагами (delay).
  • Поддержка коллбэков для каждого шага через complete.

Задержки и управление временем

Velocity.js поддерживает задержки и управление длительностью каждой анимации:

Velocity(element, { opacity: 0 }, { duration: 400, delay: 200 })
  .then(() => Velocity(element, { scale: 1.5 }, { duration: 600, easing: "easeInOut" }));
  • delay задает паузу перед стартом анимации.
  • duration определяет длительность перехода.
  • easing управляет темпом анимации (например, linear, easeIn, easeOut).

Вложенные цепочки

Цепочки могут быть вложенными, что позволяет строить сложные анимационные сценарии:

Velocity(element, { opacity: 0 }, { duration: 300 })
  .then(() => {
      return Velocity.RunSequence([
          { e: element, p: { translateX: "50px" }, o: { duration: 400 } },
          { e: element, p: { rotateZ: "30deg" }, o: { duration: 400 } }
      ]);
  })
  .then(() => Velocity(element, { opacity: 1 }, { duration: 500 }));
  • Вложенные цепочки позволяют комбинировать последовательное и параллельное выполнение.
  • Позволяют структурировать код анимаций, делая его читаемым и поддерживаемым.

Использование коллбэков

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

  • begin — срабатывает перед началом анимации.
  • progress — вызывается во время анимации с процентом завершения.
  • complete — вызывается после завершения анимации.

Пример с коллбэками в цепочке:

Velocity(element, { opacity: 0 }, { 
    duration: 500, 
    complete: () => console.log("Скрытие завершено") 
})
.then(() => Velocity(element, { translateX: "100px" }, { 
    duration: 700, 
    progress: (elements, percent) => console.log(percent) 
}));
  • Коллбэки работают на каждом шаге цепочки независимо.
  • progress можно использовать для динамического обновления интерфейса.

Управление прерыванием цепочек

Velocity.js позволяет останавливать или прерывать цепочки с помощью метода stop:

Velocity(element, { opacity: 1 }, { duration: 1000 });
Velocity(element).stop();
  • stop() мгновенно прекращает текущую анимацию.
  • Можно передавать true как аргумент для завершения анимации до конца (finish: true).
  • Полезно для динамических интерфейсов, где пользователь может вмешаться в процесс.

Сочетание с CSS-классами

Цепочки можно комбинировать с добавлением и удалением CSS-классов для создания комплексных визуальных эффектов:

Velocity(element, { opacity: 0 }, { duration: 400 })
  .then(() => {
      element.classList.add("highlight");
      return Velocity(element, { translateY: "50px" }, { duration: 600 });
  });
  • Позволяет гибко сочетать анимации JavaScript и CSS.
  • Упрощает управление стилями и состояниями элементов в интерфейсе.

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

Оглавление