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

Последовательные анимации позволяют создавать сложные визуальные эффекты, когда одно действие плавно сменяет другое. В библиотеке SVG.js это достигается с помощью методов animate(), after() и цепочек вызовов. Основная идея заключается в том, что каждая анимация может быть поставлена в очередь и выполнена после завершения предыдущей.

Создание базовой анимации

Для начала необходимо создать элемент SVG и применить к нему простую анимацию:

const draw = SVG().addTo('body').size(500, 500);
const circle = draw.circle(50).fill('red').move(50, 50);

circle.animate(1000).move(200, 50);

Здесь создаётся красный круг и перемещается на 150 пикселей вправо за 1 секунду.

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

  • animate(duration) – задаёт длительность анимации в миллисекундах.
  • Методы изменения свойств (move, fill, size, opacity) вызываются после animate() для плавного перехода.

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

Для последовательного выполнения нескольких анимаций используется метод after() или цепочка вызовов .animate().animate().

circle
  .animate(1000).move(200, 50)
  .animate(500).fill('blue')
  .animate(1000).radius(80);

В этом примере:

  1. Круг перемещается вправо.
  2. Меняется цвет заливки.
  3. Увеличивается радиус.

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

Использование функции after()

Метод after() позволяет запускать произвольную функцию после завершения анимации:

circle.animate(1000).move(200, 50).after(() => {
  circle.fill('green').animate(500).radius(100);
});

Преимущество after() в том, что можно запускать сложную логику или динамически менять свойства элемента, создавая адаптивные анимации.

Сложные последовательные эффекты

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

const rect = draw.rect(100, 50).fill('orange').move(50, 150);

rect.animate(1000).move(200, 150).after(() => {
  rect.animate(500).fill('purple').after(() => {
    rect.animate(1000).rotate(180, 100, 25);
  });
});

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

  1. Перемещение прямоугольника.
  2. Смена цвета.
  3. Поворот вокруг центра.

Использование ключевых кадров

SVG.js поддерживает плавные переходы с помощью кривых Безье через метод ease():

circle.animate(1000, '<>').move(300, 200);
  • ease() принимает параметры типа <, >, <> для настройки ускорения и замедления.
  • Можно комбинировать с цепочками анимаций для создания реалистичных эффектов движения.

Управление временными задержками

Метод delay() позволяет вставлять паузы между анимациями:

circle
  .animate(1000).move(200, 50).delay(500)
  .animate(1000).fill('yellow');
  • В примере круг сначала перемещается, затем через 0,5 секунды меняет цвет.
  • Это позволяет синхронизировать несколько элементов без использования сложных таймеров.

Синхронизация нескольких элементов

Для создания сложных сцен часто требуется запускать анимации одновременно или с определённой задержкой для разных объектов:

const square = draw.rect(50, 50).fill('cyan').move(50, 300);

circle.animate(1000).move(300, 200);
square.animate(1000).move(200, 300).delay(500);
  • Круг начинает движение сразу, а квадрат — через 0,5 секунды.
  • Такой подход позволяет создавать динамичные интерактивные сцены.

Заключение по методам управления последовательностью

  • .animate(duration) — базовая анимация элемента.
  • .after(callback) — выполнение следующей анимации или логики после завершения текущей.
  • .delay(ms) — пауза перед началом анимации.
  • .ease(type) — плавность движения.
  • Цепочки анимаций позволяют строить сложные последовательные эффекты без необходимости писать отдельные функции для каждого шага.

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

Оглавление