Цепочка трансформаций

Snap.svg предоставляет удобный и мощный инструмент для работы с трансформациями SVG-элементов. Любой объект, созданный с помощью Snap, поддерживает методы transform, translate, rotate, scale, matrix, которые можно комбинировать, создавая цепочки преобразований.

Метод transform

Метод transform позволяет задавать полное преобразование элемента в виде строки:

element.transform("t100,50r45s2,2");

Здесь:

  • t100,50 — translate (перемещение) на 100px по X и 50px по Y;
  • r45 — rotate (поворот) на 45 градусов вокруг центра элемента;
  • s2,2 — scale (масштабирование) по осям X и Y.

Ключевой момент: порядок операций имеет значение. Сначала применяется перемещение, затем поворот, затем масштабирование. Изменение порядка изменит итоговую позицию и вид объекта.

Последовательное применение методов

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

element
    .translate(50, 100)
    .rotate(30)
    .scale(1.5, 1.5);

Snap.svg сохраняет внутреннее состояние элемента и применяет преобразования последовательно, как если бы они были записаны в одной строке для transform.

Трансформации вокруг заданной точки

Методы rotate и scale поддерживают опцию центра трансформации:

element.rotate(45, 200, 100); // Поворот на 45° вокруг точки (200,100)
element.scale(2, 2, 50, 50);  // Масштабирование с центром в (50,50)

Это особенно полезно при анимации объектов, где центр вращения или масштабирования отличается от геометрического центра элемента.

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

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

var m = new Snap.Matrix();
m.translate(100, 50);
m.rotate(45, 0, 0);
m.scale(1.5, 1.5);

element.transform(m);

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

  • Позволяют хранить и повторно применять сложные комбинации трансформаций.
  • Упрощают вычисление итоговых координат после серии операций.
  • Позволяют объединять трансформации из разных источников.

Комбинирование анимаций и трансформаций

Snap.svg поддерживает анимацию трансформаций через метод animate:

element.animate({ transform: "t100,50r90s1.2,1.2" }, 2000, mina.easeinout);

Особенности:

  • Анимация плавно интерполирует между текущим состоянием и заданным трансформом.
  • Можно комбинировать с методами .translate(), .rotate() и .scale() для динамического обновления позиции элемента.
  • mina предоставляет набор кривых ускорения, влияющих на скорость анимации.

Принципы построения цепочек

  1. Локальные и глобальные трансформации: Перемещения и вращения могут быть относительно текущего состояния или абсолютными. Методы .transform() и .matrix() позволяют контролировать этот аспект.

  2. Сложные комбинации: Цепочки могут содержать перемещения, повороты, масштабирование и даже наклон через матрицы. Например:

    element.transform("t50,50r30,100,100s2,2");

    Здесь:

    • Поворот на 30° вокруг точки (100,100)
    • Масштабирование с центром в (0,0)
    • Перемещение на (50,50)

  3. Сохранение состояния: Snap.svg позволяет получить текущее преобразование через element.transform().localMatrix, что облегчает создание динамических или интерактивных эффектов.

Практический пример: вращающийся и перемещающийся круг

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

circle.animate({ transform: "t150,150r360" }, 3000, mina.linear);

Что происходит:

  • Круг сначала перемещается на (150,150)
  • Одновременно выполняется полный оборот на 360°
  • Плавность обеспечивается mina.linear

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

Важные рекомендации

  • Всегда проверять порядок трансформаций, особенно при комбинации перемещения, поворота и масштаба.
  • Использовать матрицы для сложных операций или когда требуется повторное применение трансформаций.
  • Для анимаций комбинировать строковые и методные трансформации, чтобы избежать конфликта состояний.

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

Оглавление