Базовые фигуры в mo.js строятся вокруг модуля Shape, который позволяет создавать геометрические примитивы с анимацией параметров в реальном времени. Каждый объект Shape представляет собой конфигурацию SVG-элемента, управляемого через JavaScript, где ключевые свойства интерполируются по времени, формируя плавные переходы.
Перед созданием фигур необходимо подключить библиотеку и подготовить контейнер для рендера анимаций. mo.js работает с DOM и SVG, поэтому структура страницы обычно минимальна:
<script src="https://cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
<div id="scene"></div>Создание базового объекта Shape начинается с конструктора
mojs.Shape:
const shape = new mojs.Shape({
parent: '#scene'
});Без дополнительных параметров такой объект не отображает заметной анимации, поскольку не задана форма и визуальные свойства.
Основой конфигурации являются свойства, определяющие форму, геометрию и поведение анимации:
Каждое свойство может быть анимируемым, если задан диапазон значений
через объект { start, end }.
Круг является наиболее часто используемой фигурой, поскольку легко масштабируется и подходит для эффектов вспышек, частиц и индикаторов.
const circle = new mojs.Shape({
parent: '#scene',
shape: 'circle',
fill: '#4A90E2',
radius: { 0: 50 },
duration: 800,
easing: 'cubic.out'
});
circle.play();В данном примере радиус изменяется от 0 до 50, создавая эффект появления из центра. Интерполяция свойств выполняется автоматически движком mo.js.
Расширение поведения круга достигается через комбинирование opacity и scale:
const pulse = new mojs.Shape({
parent: '#scene',
shape: 'circle',
fill: 'none',
stroke: '#FF5252',
strokeWidth: { 10: 0 },
radius: 40,
opacity: { 1: 0 },
duration: 600
});Такой подход создаёт эффект затухающего импульса, часто используемый в интерфейсах уведомлений.
Прямоугольные формы создаются через shape: 'rect'. Они
полезны для построения интерфейсных акцентов, подсветок и декоративных
блоков анимации.
const rect = new mojs.Shape({
parent: '#scene',
shape: 'rect',
fill: '#50E3C2',
radius: 0,
left: 0,
top: 0,
width: 60,
height: 60,
duration: 700,
easing: 'expo.out'
});
rect.play();Если задать равные значения ширины и высоты, фигура визуально превращается в квадрат, хотя в mo.js это всё ещё прямоугольный SVG-элемент.
Анимация изменения масштаба часто предпочтительнее изменения размеров:
const squarePop = new mojs.Shape({
parent: '#scene',
shape: 'rect',
fill: '#7B61FF',
scale: { 0: 1 },
opacity: { 0: 1 },
duration: 500,
easing: 'back.out'
});Использование back.out создаёт характерный «пружинящий»
эффект появления.
Многоугольники задаются через shape: 'polygon', где
дополнительным параметром выступает points, определяющий
количество сторон.
const triangle = new mojs.Shape({
parent: '#scene',
shape: 'polygon',
points: 3,
fill: '#FFD54F',
radius: 40,
rotation: { 0: 120 },
duration: 900
});
triangle.play();Увеличение числа точек изменяет геометрию:
const hexagon = new mojs.Shape({
parent: '#scene',
shape: 'polygon',
points: 6,
fill: '#29B6F6',
radius: 45,
scale: { 0: 1 },
duration: 800
});При работе с polygon важную роль играет вращение. Параметр
rotation позволяет синхронизировать визуальную динамику с
изменением масштаба, создавая ощущение объёмного вращения.
Линейные формы используются для построения направленных анимаций, стрелок и визуальных связок между объектами.
const line = new mojs.Shape({
parent: '#scene',
shape: 'line',
stroke: '#FFFFFF',
strokeWidth: 4,
x1: -30,
y1: 0,
x2: 30,
y2: 0,
duration: 600,
easing: 'linear.none'
});
line.play();Линия часто комбинируется с изменением длины через анимацию координат:
const lineGrow = new mojs.Shape({
parent: '#scene',
shape: 'line',
stroke: '#FF6F00',
strokeWidth: 3,
x1: { 0: -50 },
x2: { 0: 50 },
opacity: { 0: 1 },
duration: 500
});Такой подход создаёт эффект «рисования» линии от центра.
mo.js поддерживает более сложные фигуры, такие как cross, zigzag, curve и heart. Эти формы используются для создания декоративных анимаций и микровзаимодействий.
const heart = new mojs.Shape({
parent: '#scene',
shape: 'heart',
fill: '#E91E63',
scale: { 0: 1 },
duration: 700,
easing: 'elastic.out'
});
heart.play();Особенность таких форм заключается в том, что они уже содержат предопределённую SVG-геометрию, поэтому не требуют дополнительных параметров построения.
Поведение фигур сильно зависит от точки трансформации. Параметры
left и top задают смещение относительно
родительского контейнера, а origin влияет на
масштабирование и вращение.
const shape = new mojs.Shape({
parent: '#scene',
shape: 'circle',
fill: '#00C853',
radius: 30,
origin: { '0% 0%': '100% 100%' },
rotation: { 0: 180 },
duration: 800
});Изменение origin позволяет создавать нестандартные траектории анимации, особенно при комбинировании с rotation и scale.
Сила mo.js заключается в синхронной анимации нескольких параметров. Один объект Shape может изменять геометрию, прозрачность и цвет одновременно:
const multi = new mojs.Shape({
parent: '#scene',
shape: 'circle',
fill: { '#4A90E2': '#50E3C2' },
stroke: '#FFFFFF',
strokeWidth: { 0: 6 },
radius: { 10: 60 },
opacity: { 1: 0 },
duration: 1000,
easing: 'quad.out'
});
multi.play();Подобная комбинация создаёт эффект расширяющейся и растворяющейся формы, часто используемый в UI-анимациях.
Несколько фигур могут быть объединены в синхронные или каскадные анимации. Хотя это уже приближается к Burst, базовый подход остаётся тем же — независимые Shape-объекты с согласованным таймингом.
const c1 = new mojs.Shape({
parent: '#scene',
shape: 'circle',
fill: '#FF5252',
radius: 20,
delay: 0,
duration: 600
});
const c2 = new mojs.Shape({
parent: '#scene',
shape: 'circle',
fill: '#FF5252',
radius: 20,
delay: 150,
duration: 600
});
const c3 = new mojs.Shape({
parent: '#scene',
shape: 'circle',
fill: '#FF5252',
radius: 20,
delay: 300,
duration: 600
});
c1.play();
c2.play();
c3.play();Такой способ позволяет создавать эффект распространения импульса без использования дополнительных модулей.
Композиция строится на трёх уровнях:
Согласованное изменение этих уровней позволяет создавать сложные визуальные сцены из простых примитивов.