Наклон (skew)

В Snap.svg наклон (skew) используется для искажения объекта по горизонтали или вертикали. Он позволяет создавать эффекты перспективы, наклонные фигуры и динамическую трансформацию элементов SVG. В Snap.svg наклон реализуется через метод transform(), который принимает строку с трансформациями, либо через комбинированные функции matrix() или отдельные skewX() и skewY().

Метод transform()

Метод transform() позволяет применить одну или несколько трансформаций к элементу. Для наклона используется синтаксис:

element.transform("skewX(угол)");
element.transform("skewY(угол)");

где угол указывается в градусах. Примеры:

var s = Snap("#svg");
var rect = s.rect(50, 50, 100, 100);
rect.transform("skewX(20)");

В этом примере прямоугольник будет наклонен на 20 градусов по горизонтали. Для вертикального наклона используется skewY:

rect.transform("skewY(15)");

Можно комбинировать несколько трансформаций через пробел:

rect.transform("skewX(20) skewY(15) translate(50, 0)");

Важный момент: порядок трансформаций влияет на результат. Сначала применяется skewX, затем skewY, потом translate. Любая перестановка изменит внешний вид элемента.

Использование метода matrix()

Метод matrix() позволяет точечно управлять трансформациями через матрицу 2D-преобразования. Матрица задается 6 элементами: matrix(a, b, c, d, e, f).

  • a и d — масштабирование по X и Y
  • b и c — наклон по Y и X
  • e и f — смещение по X и Y

Пример наклона по X и Y через матрицу:

var skewMatrix = new Snap.Matrix();
skewMatrix.skew(30, 15); // наклон по X = 30°, по Y = 15°
rect.transform(skewMatrix);

Метод skew(x, y) класса Snap.Matrix принимает два угла и преобразует их в соответствующую матрицу наклона. Это дает точный контроль и возможность комбинировать с другими трансформациями.

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

Наклон часто применяется вместе с масштабированием и вращением. Snap.svg позволяет объединять все эти действия в одной строке трансформации или через методы класса Matrix.

Пример комбинированной трансформации:

rect.transform("skewX(20) scale(1.5, 1) rotate(30, 100, 100)");
  • skewX(20) — наклон по горизонтали
  • scale(1.5, 1) — масштаб по X
  • rotate(30, 100, 100) — вращение на 30° вокруг точки (100, 100)

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

Анимация наклона

Snap.svg поддерживает анимацию трансформаций через метод animate(). Для наклона достаточно указать конечное состояние трансформации:

rect.animate({ transform: "skewX(45) skewY(20)" }, 1000, mina.easeinout);

В этом примере прямоугольник плавно наклоняется по X на 45° и по Y на 20° за 1 секунду с использованием функции сглаживания mina.easeinout. Можно комбинировать с другими анимациями:

rect.animate({ transform: "skewX(30) scale(1.2, 1.2)" }, 1500, mina.bounce);

Важные особенности

  1. Происхождение трансформации — наклон применяется относительно локальной системы координат элемента, если не задан центр поворота или смещение.
  2. Последовательность трансформаций — влияет на визуальный результат. skew до rotate даст другой эффект, чем после.
  3. Совместимость с анимацией — при использовании animate() лучше явно указывать все трансформации, иначе предыдущие состояния могут быть сброшены.
  4. Матрица vs строка трансформации — использование Matrix дает больше точности и контроль над сложными трансформациями, особенно при объединении нескольких эффектов.

Практические примеры

Наклон текста

var text = s.text(50, 150, "Наклонный текст");
text.transform("skewX(25)");

Наклон круга с центром смещения

var circle = s.circle(200, 200, 50);
circle.transform("skewY(30) translate(50,0)");

Комбинированный наклон и вращение

rect.transform("skewX(20) skewY(15) rotate(45, 100, 100)");

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

Оглавление