Доступные параметры трансформации

Библиотека mo.js предоставляет широкий набор параметров трансформации, позволяющих управлять положением, масштабом, поворотом и деформацией анимируемых объектов. Эти параметры применяются к любому Shape, Html или другим анимируемым сущностям и являются ключевыми для создания динамичных визуальных эффектов.

Все трансформации в mo.js основаны на интерполяции значений во времени — от начального состояния к конечному, с возможностью задания сложных кривых изменения.

Позиционирование (translate)

Свойства x и y

Основные параметры перемещения:

x: 100,
y: 50
  • x — смещение по горизонтали
  • y — смещение по вертикали

Значения могут быть:

  • числовыми (100)
  • строковыми ('100px', '50%')
  • диапазонами ({ 0: 100 })

Анимация перемещения

x: { 0: 200 },
y: { 100: 0 }

Такая запись означает:

  • x: от 0 до 200
  • y: от 100 до 0

Относительные значения

x: '+=50',
y: '-=20'
  • += — увеличение относительно текущего положения
  • -= — уменьшение

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

Базовый параметр scale

scale: 2
  • Значение 1 — исходный размер
  • Больше 1 — увеличение
  • Меньше 1 — уменьшение

Анимация масштаба

scale: { 0: 1.5 }

Элемент увеличится с 0 до 1.5.

Независимые оси: scaleX, scaleY

scaleX: { 1: 2 },
scaleY: { 1: 0.5 }

Позволяет:

  • растягивать по ширине
  • сжимать по высоте

Вращение (rotate)

Свойство rotate

rotate: 45
  • Значение в градусах
  • Положительное — по часовой стрелке
  • Отрицательное — против

Анимация вращения

rotate: { 0: 360 }

Полный оборот.

Относительное вращение

rotate: '+=90'

Добавляет 90 градусов к текущему значению.

Наклон (skew)

Свойства skewX и skewY

skewX: 30,
skewY: 10
  • Искажение по осям
  • Значения в градусах

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

skewX: { 0: 45 }

Создает эффект «наклоняющегося» элемента.

Точка трансформации (transform-origin)

Свойство origin

origin: '50% 50%'

Определяет точку, относительно которой применяются трансформации.

Примеры:

  • '0% 0%' — левый верхний угол
  • '100% 100%' — правый нижний
  • '50% 50%' — центр

Смещение точки

origin: { '0% 0%': '100% 100%' }

Позволяет анимировать точку трансформации.

Комплексные трансформации

Комбинирование параметров

new mojs.Shape({
  x: { 0: 200 },
  y: { 0: 100 },
  scale: { 0.5: 1.5 },
  rotate: { 0: 180 }
});

Одновременно происходит:

  • перемещение
  • масштабирование
  • вращение

Параметры easing для трансформаций

Каждое свойство может иметь собственную функцию изменения:

x: { 0: 200, easing: 'cubic.out' },
scale: { 1: 2, easing: 'elastic.out' }

Популярные easing:

  • linear
  • quad.in
  • cubic.out
  • elastic.out
  • bounce.out

Специальные синтаксические возможности

Использование функций

x: {
  0: 200,
  easing: function (p) {
    return Math.sin(p * Math.PI);
  }
}

Позволяет создавать произвольные кривые.

Использование ключевых кадров

scale: {
  0: 0,
  50: 1.5,
  100: 1
}

Позволяет задавать промежуточные состояния.

Работа с 3D-трансформациями

mo.js в основном ориентирован на 2D, но можно использовать CSS-свойства:

transform: 'rotateX(45deg) rotateY(30deg)'

Однако:

  • такие трансформации не интерполируются автоматически
  • лучше комбинировать с onUpdate

Управление трансформациями через onUpdate

onUpdate(progress) {
  const value = progress * 100;
  this.el.style.transform = `translateX(${value}px) rotate(${value}deg)`;
}

Позволяет:

  • вручную управлять трансформациями
  • комбинировать эффекты вне стандартных параметров

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

Оптимальные свойства

Наиболее производительные:

  • transform
  • opacity

mo.js автоматически использует transform, что:

  • минимизирует перерисовку
  • задействует GPU

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

Эффект появления

scale: { 0: 1 },
opacity: { 0: 1 }

Эффект «вылета»

y: { 0: -200 },
rotate: { 0: 90 },
scale: { 0.5: 1 }

Пульсация

scale: { 1: 1.3 },
repeat: 999,
yoyo: true

Взаимодействие трансформаций

Важно учитывать:

  • порядок применения трансформаций влияет на результат
  • масштабирование перед вращением ≠ вращение перед масштабированием

mo.js управляет этим автоматически через единый transform-стек.

Ограничения и особенности

  • Нельзя напрямую анимировать transform строкой (кроме onUpdate)
  • Некоторые CSS-трансформации требуют ручной обработки
  • Сложные 3D-эффекты лучше реализовывать через CSS или WebGL

Расширенные возможности

Motion Path (через плагины)

Позволяет двигать объект по траектории, комбинируя:

  • x
  • y
  • rotate

Связка с Timeline

const timeline = new mojs.Timeline();

timeline.add(
  shape1,
  shape2
);

Трансформации синхронизируются между объектами.

Вывод ключевых особенностей

  • Трансформации в mo.js декларативны и анимируемы
  • Поддерживаются все основные типы: перемещение, масштаб, вращение, наклон
  • Возможна сложная интерполяция через easing и ключевые кадры
  • Высокая производительность за счёт использования CSS transform
  • Гибкость через onUpdate и кастомные функции
Оглавление