В mo.js геометрия анимаций строится вокруг параметров форм: кругов, прямоугольников, полигонов и составных эффектов. Одними из ключевых характеристик, определяющих визуальное поведение объектов, являются радиус и скругление углов. Эти параметры влияют не только на внешний вид фигуры, но и на динамику её трансформации при анимации.
В контексте mo.js радиус определяет размер окружности или базовый масштаб радиально симметричных объектов. Для кругов и всплесков (burst-анимаций) он становится основным контролирующим параметром, задающим расстояние от центра до границы фигуры.
В простейшем случае круг описывается через radius:
const circle = new mojs.Shape({
shape: 'circle',
radius: 50,
fill: 'none',
stroke: '#4A90E2',
strokeWidth: 8
});Здесь радиус 50 задаёт фиксированную геометрию объекта. Однако сила mo.js заключается в возможности анимировать этот параметр, превращая статическую окружность в динамически изменяющуюся форму.
Радиус в mo.js может быть анимирован так же, как и любые другие числовые параметры. Это позволяет создавать эффекты расширения, пульсации и “взрывного” появления формы.
const circle = new mojs.Shape({
shape: 'circle',
radius: { 0: 60 },
duration: 800,
easing: 'ease.out'
});В данном случае происходит интерполяция от нулевого радиуса до 60, что визуально создаёт эффект появления круга из центра.
Особенность mo.js заключается в том, что анимация радиуса не требует дополнительных вычислений: библиотека автоматически строит промежуточные состояния формы, сохраняя её геометрическую целостность.
В burst-анимациях радиус становится параметром, определяющим радиальное распределение частиц или элементов.
const burst = new mojs.Burst({
radius: { 0: 120 },
count: 8,
children: {
shape: 'circle',
radius: 10,
fill: '#FF4D4D'
}
});Здесь внешний радиус управляет зоной распространения элементов. При анимации от 0 до 120 создаётся эффект расширяющегося импульса.
Важно, что радиус в burst не только определяет размер окружности, но и влияет на траектории дочерних элементов, которые распределяются по окружности с равными угловыми интервалами.
Для прямоугольников и многоугольников ключевым параметром выступает
radius, но в данном случае он интерпретируется как
скругление углов. Это позволяет трансформировать жёсткую геометрию в
более мягкую и органичную форму.
const rect = new mojs.Shape({
shape: 'rect',
width: 100,
height: 60,
radius: 10,
fill: '#2ECC71'
});Параметр radius здесь задаёт степень округления углов.
Чем больше значение, тем ближе форма становится к эллипсу.
mo.js поддерживает анимацию radius и для прямоугольных
форм, что позволяет динамически изменять характер объекта — от строгого
прямоугольника до мягкой капсулы.
const rect = new mojs.Shape({
shape: 'rect',
width: 120,
height: 60,
radius: { 0: 30 },
duration: 600,
easing: 'cubic.out'
});Такая трансформация часто используется для создания эффектов нажатия, выделения или интерактивного отклика интерфейса.
Скругление углов влияет не только на визуальную эстетику, но и на восприятие движения. Прямые углы создают ощущение механичности и резкости, тогда как увеличенный радиус делает движение более плавным и “живым”.
В интерфейсных анимациях это позволяет управлять эмоциональной окраской взаимодействия без изменения структуры кода или логики анимации.
Наиболее выразительные эффекты достигаются при сочетании изменения радиуса с другими параметрами, такими как масштаб, прозрачность и смещение.
const shape = new mojs.Shape({
shape: 'circle',
radius: { 10: 80 },
scale: { 1: 1.5 },
opacity: { 1: 0 },
duration: 900,
easing: 'expo.out'
});Здесь радиус формирует расширение объекта, масштаб усиливает визуальный рост, а прозрачность завершает эффект исчезновения.
При работе с несколькими слоями анимации радиус часто используется как синхронизирующий параметр. Например, внешний круг может расширяться быстрее, чем внутренние элементы, создавая эффект волны.
const outer = new mojs.Shape({
shape: 'circle',
radius: { 20: 100 },
stroke: '#000',
fill: 'none',
duration: 1000
});
const inner = new mojs.Shape({
shape: 'circle',
radius: { 10: 60 },
fill: '#000',
duration: 700
});Разная скорость изменения радиуса создаёт многослойную динамику, усиливающую глубину анимации.
Радиус в mo.js не является просто числовым параметром. Он выступает как геометрический контроллер, влияющий на:
Изменение радиуса автоматически перестраивает внутреннюю систему координат анимации, особенно в burst- и shape-компонентах.
При последовательной анимации значений radius можно
создавать эффект морфинга между геометрическими состояниями:
const morph = new mojs.Shape({
shape: 'rect',
width: 80,
height: 80,
radius: { 0: 40 },
duration: 1000,
easing: 'sin.inout'
});Такое поведение позволяет использовать один объект как основу для нескольких визуальных состояний без смены типа фигуры.
При построении анимационных последовательностей изменение радиуса используется как инструмент создания ритма. Периодическое увеличение и уменьшение значения формирует эффект пульсации, который часто применяется в индикаторах активности и интерактивных подсказках.
const pulse = new mojs.Shape({
shape: 'circle',
radius: { 20: 40 },
isYoyo: true,
repeat: 5,
duration: 400
});Здесь радиус становится основой циклического визуального движения, формируя устойчивый ритмический паттерн.
Все изменения радиуса в mo.js происходят относительно центра объекта. Это означает, что расширение или скругление не смещает фигуру, а изменяет её симметрично относительно центральной точки.
Такая модель позволяет предсказуемо комбинировать радиус с другими трансформациями, не нарушая геометрическую стабильность сцены.
При создании сложных анимационных сцен радиус используется для управления плотностью визуальных элементов. Большой радиус увеличивает “воздух” в композиции, тогда как малый — концентрирует внимание в центре.
В burst-анимациях это особенно заметно: увеличение радиуса приводит к более широкому распределению частиц, изменяя восприятие энергии и интенсивности эффекта.