Перейти к основному содержимому

Transform (Трансформация)

Виджет Transform позволяет применять графические преобразования к дочернему элементу, такие как наклон (skew/tilt), вращение (rotate), масштабирование (scale) и сдвиг (translate/slide).
Этот виджет можно использовать вместе с анимациями, чтобы создавать визуально выразительные интерфейсы.

transform.png

Добавление виджета Transform

Чтобы добавить Transform в проект:

  1. Нажмите + Add Widget, перетащите Transform из вкладки Base Elements
    или добавьте его напрямую из дерева виджетов.

  2. Поместите внутри него дочерний элемент, который вы хотите трансформировать.

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

    Для настройки наклона:

    1. Выделите Transform и перейдите в Properties Panel.
    2. Чтобы наклонить элемент по горизонтали, используйте свойство Skew X.
      Положительное значение наклоняет верхнюю часть влево, нижнюю — вправо.
    3. Чтобы наклонить элемент по вертикали, используйте свойство Skew Y.
      Положительное значение поднимает левую сторону вверх и опускает правую вниз.
    4. Отрицательные значения меняют направление наклона.
  4. (Необязательно) Чтобы изменить точку отсчёта трансформации (центр вращения),
    используйте параметры Transform Origin и Alignment.

Настройка

Поведение и внешний вид Transform можно изменять через Properties Panel.

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

Чтобы выбрать тип преобразования:

  1. Выделите Transform.
  2. В Properties Panel откройте выпадающий список Transform Type.
  3. Выберите нужный вариант.

Масштабирование (Scale)

Используйте:

  • Scale X — изменяет размер по горизонтали.
  • Scale Y — изменяет размер по вертикали.

Например:

  • значение 0.5 уменьшит элемент в два раза,
  • значение 2 — увеличит его в два раза.

Вращение (Rotate)

Используйте свойство Rotate (degree), чтобы повернуть элемент на нужный угол.
Значение задаётся в градусах — от 0 до 360.
По умолчанию вращение происходит по часовой стрелке. Чтобы повернуть против часовой — введите отрицательное значение.

Сдвиг (Translate)

  • Translate X — сдвигает элемент по горизонтали.
    Положительное значение — вправо, отрицательное — влево.
  • Translate Y — сдвигает элемент по вертикали.
    Положительное значение — вниз, отрицательное — вверх.