Радиус распространения в анимациях mo.js определяет геометрию разлёта частиц относительно центральной точки и фактически задаёт масштаб области, в которой происходит генерация и движение элементов. В контексте Burst-модуля это ключевой параметр, влияющий на визуальную плотность, динамику и восприятие анимационного эффекта.
В основе механизма лежит простая модель окружности. Центр эффекта фиксируется в точке появления, а каждая частица получает направление движения, рассчитанное относительно угла на окружности. Радиус определяет максимальное расстояние от центра, на котором могут находиться стартовые позиции или конечные точки траектории элементов.
При увеличении значения радиуса:
При уменьшении:
В mo.js Burst радиус задаёт окружность, по которой распределяются дочерние элементы. Каждый элемент получает собственную траекторию, зависящую от угла размещения.
Базовая структура:
const burst = new mojs.Burst({
radius: { 0: 100 },
count: 10,
children: {
shape: 'circle',
radius: 5
}
});Здесь radius: { 0: 100 } означает анимацию расширения радиуса от нуля до ста единиц, что создаёт эффект «взрыва» из точки.
Одной из ключевых особенностей mo.js является возможность анимировать параметры через объектное описание ключевых кадров. Радиус не является статичной величиной — он может изменяться во времени, формируя динамическое расширение или сжатие.
Типичные сценарии:
Резкое расширение
radius: { 0: 120 }Создаёт эффект мгновенного выброса частиц из центра.
Пульсирующее поведение
radius: { 0: 80, 80: 40, 40: 100 }Используется для имитации повторных импульсов или эха.
Контролируемое затухание
radius: { 0: 100, 100: 60 }Формирует эффект «схлопывания» распределения после выброса.
Параметр count напрямую взаимодействует с радиусом. При фиксированном количестве элементов увеличение радиуса приводит к снижению плотности на единицу площади.
Математически это можно описать через площадь окружности:
S = πr²При росте r площадь увеличивается квадратично, что означает экспоненциальное разрежение частиц при линейном увеличении радиуса.
Это важно учитывать при построении визуально сбалансированных эффектов: слишком большой радиус при малом count создаёт визуальный разрыв, тогда как малый радиус при большом count формирует «комок» частиц.
mo.js позволяет контролировать не только сам радиус, но и распределение элементов внутри него. Частицы могут быть:
Это достигается через дополнительные параметры children, включая радиусные смещения и угловые вариации.
Пример равномерного распределения:
const burst = new mojs.Burst({
radius: { 0: 120 },
count: 12,
children: {
shape: 'line',
stroke: 'white',
radius: 4
}
});Здесь элементы располагаются равномерно по окружности конечного радиуса.
Радиус может быть задан не только как скаляр, но и как объект диапазона, что позволяет создавать асимметричные или направленные взрывы.
radius: { 50: 150 }Такая запись задаёт стартовое состояние с уже ненулевым радиусом, что создаёт эффект предварительного расширения или «разжатой» формы.
В более сложных сценариях используются разные радиусы по осям через трансформации children, что позволяет имитировать эллиптические формы распространения.
Хотя радиус напрямую не является временной функцией, его изменение тесно связано с easing-кривыми всей анимации. При быстром увеличении радиуса с экспоненциальным easing эффект воспринимается как взрывной импульс, тогда как линейное изменение создаёт равномерное расширение.
Пример с easing:
const burst = new mojs.Burst({
radius: { 0: 150 },
duration: 600,
easing: 'cubic.out',
count: 15
});В этом случае радиус быстро растёт в начале и замедляется к концу анимации, формируя эффект физического расширения с инерцией.
Центральная точка (origin) определяет начало координат для радиуса. При смещении якоря относительно элемента DOM радиус начинает строиться не от центра экрана, а от конкретного UI-объекта.
Это используется в интерфейсных эффектах:
Пример:
const burst = new mojs.Burst({
left: 0,
top: 0,
radius: { 0: 90 },
count: 8,
children: {
shape: 'circle'
}
});При позиционировании через left/top радиус визуально «привязывается» к элементу интерфейса.
В сложных композициях используется несколько Burst-слоёв с различными радиусами. Это создаёт глубину и ощущение трёхмерного взрыва.
Типичная структура:
Пример:
const inner = new mojs.Burst({
radius: { 0: 50 },
count: 20,
children: { radius: 3 }
});
const outer = new mojs.Burst({
radius: { 0: 140 },
count: 8,
children: { radius: 6 }
});Комбинация таких слоёв формирует сложную визуальную структуру без необходимости вручную рассчитывать траектории.
Увеличение радиуса косвенно влияет на производительность. Хотя сам параметр не является вычислительно дорогим, рост радиуса обычно сопровождается увеличением числа элементов и площади их движения.
Факторы нагрузки:
Оптимизация достигается балансом между count и radius, а также ограничением одновременных Burst-эффектов на экране.
Разные формы children по-разному воспринимают радиус:
При увеличении радиуса линейные формы визуально подчёркивают направление движения, тогда как круглые формы усиливают ощущение симметрии.
В интерфейсных сценариях радиус часто связывается с интенсивностью события. Например, сила клика или длительность удержания могут преобразовываться в величину радиуса.
const radius = 30 + pressure * 100;
const burst = new mojs.Burst({
radius: { 0: radius },
count: 12
});Такой подход позволяет создавать адаптивные анимации, где визуальный масштаб напрямую отражает поведение пользователя.
В сложных анимационных сценах радиус выполняет роль композиционного инструмента. Он задаёт не только физическую границу распространения, но и визуальный ритм сцены.
Малый радиус концентрирует внимание в центре интерфейса, большой — расширяет сцену и создаёт ощущение пространства. Последовательное изменение радиуса в нескольких Burst-слоях формирует направленный визуальный поток, управляющий восприятием движения.