Анимация трансформаций

Snap.svg предоставляет мощный и гибкий API для работы с векторной графикой в формате SVG, включая анимацию трансформаций объектов. Под трансформациями понимаются операции, изменяющие положение, размер или ориентацию графического элемента, такие как translate (смещение), rotate (вращение), scale (масштабирование) и skew (наклон).

В Snap.svg трансформации применяются к объектам через метод transform(), который принимает строку с последовательностью операций. Например:

var s = Snap("#svg");
var rect = s.rect(50, 50, 100, 100);
rect.transform("translate(50, 0) rotate(45) scale(1.5)");

Здесь прямоугольник сначала смещается на 50 пикселей вправо, затем поворачивается на 45°, и после этого увеличивается в 1.5 раза.

Последовательности и комбинированные трансформации

В Snap.svg можно комбинировать несколько операций через пробел, создавая цепочку трансформаций. Порядок операций имеет критическое значение:

  • Сначала применяются операции слева направо,
  • Изменения после rotate зависят от позиции элемента на момент вращения,
  • Масштабирование и смещение также могут изменять координаты центра вращения.

Пример сложной последовательной трансформации:

rect.transform("translate(100,50) rotate(30,100,50) scale(2,2)");

Здесь вращение происходит относительно точки (100,50), а не центра объекта, что позволяет создавать более точные анимационные эффекты.

Метод animate() для трансформаций

Snap.svg обеспечивает анимацию с помощью метода animate(), который принимает следующие параметры:

  1. Объект свойств – свойства, которые нужно анимировать (transform, x, y, fill и др.).
  2. Длительность анимации – в миллисекундах.
  3. Инерционное сглаживание (easing) – функция типа mina.linear, mina.easein, mina.elastic.
  4. Коллбек – функция, выполняемая после завершения анимации.

Пример анимации поворота и смещения:

rect.animate({ transform: "translate(200,0) rotate(180)" }, 2000, mina.easeinout);

Этот код плавно перемещает прямоугольник вправо на 200 пикселей и поворачивает его на 180° за 2 секунды с эффектом ускорения и замедления.

Анимация сложных последовательных трансформаций

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

rect.animate({ transform: "translate(100,0)" }, 1000, mina.linear, function() {
    rect.animate({ transform: "rotate(90)" }, 1000, mina.easein);
});

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

Центр вращения и относительные трансформации

При использовании rotate(angle, cx, cy) можно задать точку вращения (cx, cy). Если эти параметры опущены, Snap.svg использует центр объекта по умолчанию. Масштабирование через scale(sx, sy, cx, cy) также поддерживает указание центра, что важно для создания эффекта увеличения без смещения объекта.

Пример:

rect.animate({ transform: "scale(1.5,1.5,50,50)" }, 1500, mina.elastic);

Прямоугольник увеличивается в 1.5 раза относительно точки (50,50).

Использование относительных трансформаций с toString()

Snap.svg позволяет получать текущую трансформацию элемента через transform().local или transform().global, что удобно для динамических анимаций:

var current = rect.transform().local;
rect.animate({ transform: current + " translate(50,50)" }, 1000);

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

Интерактивные трансформации

Snap.svg поддерживает анимацию в ответ на события:

rect.click(function() {
    this.animate({ transform: "rotate(360)" }, 1000, mina.bounce);
});

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

Анимация трансформаций с помощью атрибутов matrix

Для полного контроля над трансформациями можно использовать матрицы преобразований, объединяющие все операции в единую 2D-матрицу. Snap.svg поддерживает метод Matrix() для создания и применения таких матриц:

var m = new Snap.Matrix();
m.translate(100,50).rotate(45).scale(2);
rect.animate({ transform: m.toTransformString() }, 2000, mina.easeinout);

Использование матриц особенно удобно для сложных анимаций с несколькими объектами и нестандартными центрами вращения.

Функции сглаживания (easing)

Snap.svg предоставляет несколько встроенных функций для анимации трансформаций:

  • mina.linear – линейное движение, без ускорения и замедления.
  • mina.easein – ускорение в начале.
  • mina.easeout – замедление в конце.
  • mina.easeinout – комбинация ускорения и замедления.
  • mina.elastic – эффект «пружины».
  • mina.bounce – эффект отскока.

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

Примеры комплексных эффектов

Комбинируя смещение, вращение, масштабирование и наклон, можно создавать сложные эффекты:

rect.animate(
    { transform: "translate(100,50) rotate(180,75,75) scale(1.5,1.5) skewX(20)" },
    3000,
    mina.elastic
);

Эта анимация объединяет все основные трансформации и демонстрирует возможности Snap.svg для создания динамических графических эффектов.

Использование трансформаций в Snap.svg позволяет создавать плавные, наглядные и интерактивные SVG-анимации, которые могут сочетать смещение, вращение, масштабирование и наклон объектов, при этом управление центрами и порядком операций дает полный контроль над визуальным эффектом.

Оглавление