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

Snap.svg предоставляет гибкие возможности для работы с векторной графикой SVG и управлением анимацией. Одной из ключевых особенностей является возможность одновременного запуска нескольких анимаций на одном элементе или группе элементов — параллельные анимации. Это позволяет создавать динамичные и комплексные визуальные эффекты без необходимости ручного синхронизирования каждой анимации.

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

В Snap.svg каждая анимация создаётся методом .animate(). Основной синтаксис:

element.animate(attributes, duration, easing, callback);
  • attributes — объект с конечными значениями свойств SVG (например, cx, cy, fill, r).
  • duration — длительность анимации в миллисекундах.
  • easing — функция плавности изменения (mina.linear, mina.easein, mina.easeout и др.).
  • callback — функция, вызываемая после завершения анимации.

Для параллельного выполнения достаточно вызвать .animate() несколько раз на одном элементе или на разных элементах сразу. Snap.svg автоматически запускает все анимации без ожидания завершения других.

Пример параллельной анимации на одном элементе

var s = Snap(400, 400);
var circle = s.circle(50, 50, 40).attr({fill: "#00f"});

// Параллельное изменение позиции и цвета
circle.animate({cx: 300}, 2000, mina.easein);
circle.animate({fill: "#f00"}, 2000, mina.easein);

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

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

Snap.svg поддерживает группы элементов через метод s.group(). Это позволяет запускать параллельные анимации сразу на нескольких элементах.

var s = Snap(400, 400);
var rect1 = s.rect(50, 50, 80, 80).attr({fill: "#0f0"});
var rect2 = s.rect(150, 50, 80, 80).attr({fill: "#00f"});

var group = s.group(rect1, rect2);

// Параллельное изменение размеров и цвета всей группы
group.animate({transform: 's1.5'}, 1500, mina.easeinout);
group.animate({fill: "#f0f"}, 1500, mina.easeinout);

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

Сложные комбинации анимаций

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

var s = Snap(500, 500);
var star = s.polygon([100,10, 120,90, 180,90, 130,140, 150,210, 100,170, 50,210, 70,140, 20,90, 80,90])
              .attr({fill: "#ff0", stroke: "#000", strokeWidth: 2});

// Одновременное вращение, масштабирование и смена цвета
star.animate({transform: 'r360'}, 3000, mina.easeinout);
star.animate({transform: 's1.5'}, 3000, mina.easeinout);
star.animate({fill: "#f00"}, 3000, mina.linear);

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

Контроль синхронизации через таймеры

Для более точного управления параллельными анимациями можно использовать методы setTimeout или Snap.animate() для создания независимых анимационных потоков:

var s = Snap(400, 400);
var circle = s.circle(50, 50, 30).attr({fill: "#0ff"});

// Анимация перемещения
Snap.animate(50, 350, function(val){
    circle.attr({cx: val});
}, 2000, mina.easein);

// Параллельная анимация цвета через таймер
setTimeout(function(){
    circle.animate({fill: "#f0f"}, 2000, mina.easeout);
}, 0);

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

Рекомендации по оптимизации

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

Итоговая структура параллельной анимации

  • Выбор элемента или группы элементов
  • Определение свойств для анимации
  • Запуск нескольких .animate() с одинаковой длительностью или с учётом задержки
  • При необходимости использование Snap.animate() или таймеров для точного управления
  • Контроль конфликтов атрибутов и трансформаций

Эта методология позволяет создавать мощные и выразительные SVG-анимации в Snap.svg, полностью раскрывая возможности параллельного управления визуальными эффектами.

Оглавление