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

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

Основы параллельных анимаций

В SVG.js параллельные анимации создаются через вызов метода .animate() на одном и том же элементе несколько раз, либо через объединение различных элементов в общий контейнер. Например:

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(100, 100).fill('red');

rect.animate(2000).move(300, 0);  // анимация перемещения
rect.animate(2000).fill('blue'); // анимация изменения цвета

В этом примере обе анимации запускаются одновременно и независимо друг от друга, так как каждая анимация создается отдельным вызовом .animate().

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

rect.animate(2000).attr({ x: 300, fill: 'blue' });

Работа с параллельными цепочками анимаций

SVG.js поддерживает построение цепочек анимаций через .animate().after() или .animate().loop(). Чтобы несколько анимаций выполнялись параллельно внутри цепочки, необходимо использовать группировку элементов или комбинировать .animate() с разными элементами:

const circle1 = draw.circle(50).fill('green').move(0, 0);
const circle2 = draw.circle(50).fill('orange').move(100, 0);

circle1.animate(1000).move(200, 200);
circle2.animate(1000).move(200, 0);

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

Использование контейнеров для синхронизации

SVG.js предоставляет возможность объединять элементы в group(), что облегчает управление параллельными анимациями:

const group = draw.group();
const rect1 = group.rect(50, 50).fill('red');
const rect2 = group.rect(50, 50).fill('blue').move(60, 0);

group.animate(2000).transform({ rotate: 180 });
rect1.animate(2000).move(100, 0);
rect2.animate(2000).move(100, 50);

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

Управление временем и задержкой анимаций

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

rect.animate(1000).move(300, 0).delay(500);  // задержка перед стартом
rect.animate(1000).fill('yellow');          // начинается сразу
  • .delay(ms) откладывает начало конкретной анимации.
  • .duration(ms) задает продолжительность анимации.
  • Использование разных значений delay позволяет синхронизировать или расставлять анимации во времени.

Параллельные анимации с различными easing-функциями

Каждая анимация может иметь свою функцию сглаживания движения (easing), что позволяет создавать естественные и разнообразные эффекты:

rect.animate(1500, '<>').move(300, 0);  // ease-in-out
rect.animate(1500, '>').fill('green');  // ease-out
  • '<>' – плавное ускорение и замедление
  • '>' – ускорение в начале
  • '<' – замедление в конце
  • 'linear' – равномерное движение

Использование различных easing-функций для параллельных анимаций делает визуальные эффекты более динамичными и выразительными.

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

SVG.js позволяет комбинировать параллельные анимации с последовательными через .after():

rect.animate(1000).move(300, 0);           // параллельная
rect.animate(1000).fill('purple').after(rect); // последовательная после перемещения

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

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

  1. Минимизировать количество анимаций на одно свойство — несколько параллельных анимаций на одно и то же свойство конфликтуют.
  2. Использовать группы для синхронизации — поворот, масштабирование или смещение группы сразу применяет эффект ко всем элементам.
  3. Контролировать задержки и easing-функции — параллельные анимации без синхронизации могут выглядеть хаотично.
  4. Комбинировать параллельные и последовательные цепочки для создания интерактивных и сложных сцен.

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

Оглавление