Вращение и наклон

Вращение в анимациях mo.js строится вокруг трансформаций, применяемых к DOM-элементам или canvas-объектам через свойства tween-модели. Основная идея заключается в управлении углами поворота и наклона во времени, с возможностью комбинировать несколько осей и управлять поведением через easing-функции и таймлайны.

В mo.js трансформации задаются как анимируемые свойства объекта. Среди них ключевыми для вращения и наклона являются:

  • rotateZ — вращение в плоскости экрана
  • rotateX — наклон по горизонтальной оси (3D)
  • rotateY — наклон по вертикальной оси (3D)
  • angle — альтернативное обозначение поворота в некоторых модулях
  • perspective — глубина 3D-эффекта

Каждое из этих свойств интерполируется во времени, создавая плавные переходы между начальным и конечным состоянием.

Поворот по оси Z

Плоское вращение является наиболее частым сценарием. Оно применяется к элементам интерфейса, иконкам, кнопкам, декоративным фигурам.

const circle = new mojs.Shape({
  parent: document.body,
  shape: 'circle',
  radius: 40,
  fill: 'none',
  stroke: '#4FC1E9',
  strokeWidth: 4,

  duration: 1200,
  rotateZ: {
    0: 360
  },
  easing: 'cubic.out'
});

circle.play();

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

Управление направлением и скоростью

Скорость вращения определяется длительностью анимации и кривой easing. При увеличении длительности вращение становится более плавным и медленным, при сокращении — резким.

rotateZ: {
  0: -180
}

Отрицательные значения меняют направление вращения без необходимости дополнительной логики.

Наклон и 3D-трансформации

Наклон создаёт иллюзию глубины и объёма. В отличие от rotateZ, оси rotateX и rotateY работают в трёхмерном пространстве.

Для корректного отображения требуется учитывать перспективу:

const box = new mojs.Html({
  el: '#box',

  duration: 1000,
  perspective: 600,

  rotateX: {
    0: 60
  },

  rotateY: {
    0: -45
  },

  easing: 'expo.out'
});

box.play();

Роль perspective

Без perspective 3D-эффект становится плоским и теряет визуальную глубину. Значение перспективы определяет интенсивность искажения:

  • малые значения (200–400) — сильный эффект перспективы
  • большие значения (800–1200) — мягкий, почти незаметный наклон

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

Наиболее выразительные анимации достигаются при одновременном использовании нескольких осей. mo.js позволяет задавать независимые кривые для каждого свойства.

const card = new mojs.Html({
  el: '.card',

  duration: 1400,
  perspective: 800,

  rotateZ: {
    0: 180
  },

  rotateY: {
    0: 25
  },

  rotateX: {
    0: -15
  },

  easing: 'back.out'
});

card.play();

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

Анимация через timeline

При работе с несколькими элементами вращение и наклон удобно объединять в таймлайн. Это позволяет синхронизировать движения и управлять общей последовательностью.

const shape1 = new mojs.Shape({
  shape: 'circle',
  radius: 30,
  fill: '#FF6B6B',
  rotateZ: { 0: 360 },
  duration: 1000
});

const shape2 = new mojs.Shape({
  shape: 'rect',
  radius: 20,
  fill: '#4ECDC4',
  rotateY: { 0: 180 },
  duration: 1000
});

const timeline = new mojs.Timeline();

timeline.add(shape1, shape2);
timeline.play();

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

Повторение и циклические вращения

Для бесконечных эффектов вращения используются параметры:

  • repeat — количество повторов
  • yoyo — возврат в исходное состояние
const loader = new mojs.Shape({
  shape: 'circle',
  radius: 25,
  stroke: '#333',
  strokeWidth: 3,
  fill: 'none',

  rotateZ: {
    0: 360
  },

  duration: 800,
  repeat: 5,
  easing: 'linear'
});

Линейное easing особенно важно при циклических вращениях, чтобы избежать визуальных скачков скорости.

Тонкая настройка траекторий вращения

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

rotateZ: {
  0: 180,
  easing: 'elastic.out'
}

Эластичное easing создаёт эффект “перекрута” с возвратом, имитируя физическое поведение объекта.

Распространённые паттерны использования

Индикаторы загрузки

Вращение используется для создания минималистичных спиннеров:

new mojs.Shape({
  shape: 'circle',
  radius: 20,
  stroke: '#000',
  strokeWidth: 2,
  fill: 'none',

  rotateZ: {
    0: 360
  },

  duration: 900,
  repeat: 999,
  easing: 'linear'
}).play();

Интерактивные элементы интерфейса

При наведении курсора вращение комбинируется с наклоном:

el.addEventListener('mouseenter', () => {
  new mojs.Html({
    el,
    rotateY: { 0: 15 },
    rotateX: { 0: -10 },
    duration: 300,
    easing: 'quad.out'
  }).play();
});

Декоративные фоны

Множественные элементы с разными скоростями вращения создают эффект глубины:

rotateZ: {
  0: 360
},
duration: 3000 + Math.random() * 2000

Особенности вычисления трансформаций

Внутри mo.js трансформации применяются через CSS transform, где порядок операций влияет на итоговый результат. Комбинации rotateX, rotateY и rotateZ не коммутативны, что приводит к различному визуальному результату при изменении порядка применения.

Также важно учитывать, что при высокой нагрузке большого количества вращающихся объектов производительность может снижаться из-за частого пересчёта layout и paint слоя.

Ошибки при работе с вращением и наклоном

  • Одновременное использование слишком большого количества 3D-элементов без perspective
  • Применение нелинейного easing к бесконечным вращениям
  • Игнорирование начального состояния трансформации
  • Конфликты между CSS transform и mo.js transform pipeline

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

Оглавление