В mo.js количество визуальных объектов задаётся не как фиксированная сущность сцены, а как параметр конкретного эффекта или анимационного модуля. Каждый модуль — shape, burst, html, swirl — оперирует собственным способом генерации экземпляров, но общий принцип остаётся одинаковым: один объект конфигурации может порождать множество анимированных сущностей.
Во многих эффектах ключевым параметром выступает count,
определяющий число создаваемых частиц:
const burst = new mojs.Burst({
radius: { 0: 100 },
count: 20,
children: {
shape: 'circle',
radius: 5,
fill: 'cyan'
}
});Значение count определяет плотность визуального эффекта.
При малых значениях формируется акцентированный минималистичный рисунок,
при больших — плотное облако частиц, визуально переходящее в
текстуру.
Внутренне mo.js создаёт массив дочерних анимаций, где каждый элемент получает индивидуальный набор параметров, вычисляемых на основе общей конфигурации.
Количество элементов тесно связано с их распределением. При генерации множества объектов библиотека автоматически рассчитывает начальные параметры для каждого экземпляра: угол, радиус, смещение, задержку, масштаб.
Для burst-эффектов применяется радиальная модель. Каждый элемент получает уникальный угол:
const burst = new mojs.Burst({
radius: { 0: 120 },
count: 12,
children: {
shape: 'polygon',
points: 5,
fill: 'orange',
angle: { 0: 360 }
}
});Внутри происходит равномерное распределение углов:
Это позволяет формировать симметричные всплески, напоминающие взрыв или цветок.
При работе с массивами значений mo.js позволяет задавать свойства в виде диапазонов или функций, что приводит к линейному распределению параметров.
const timeline = new mojs.Timeline();
const tween = new mojs.Tween({
duration: 1000,
delay: { 0: 500 },
onUpdate(progress, index) {
return progress;
}
});Хотя timeline не оперирует count напрямую, он демонстрирует принцип:
каждый элемент может получать индивидуальный delay,
формируя каскадную последовательность.
Наиболее важный механизм распределения элементов — объект
children. Он определяет шаблон, который будет применён ко
всем создаваемым экземплярам.
const burst = new mojs.Burst({
count: 30,
children: {
shape: 'circle',
radius: { 3: 0 },
duration: 800,
easing: 'cubic.out'
}
});Каждый дочерний элемент наследует общую структуру, но получает индивидуальные вариации. mo.js автоматически интерпретирует числовые диапазоны как анимацию параметров, распределённых по времени и экземплярам.
Более гибкий способ управления распределением — использование функций вместо фиксированных значений. Внутри mo.js каждая частица может быть адресована через индекс, что позволяет вручную управлять распределением.
const burst = new mojs.Burst({
count: 10,
children: {
radius: (i) => 10 + i * 2,
fill: (i) => i % 2 ? 'red' : 'blue'
}
});В этом случае:
Такой подход превращает набор одинаковых элементов в структурированную систему.
mo.js активно использует случайность как инструмент распределения. Вместо строгих последовательностей можно задать диапазоны:
const burst = new mojs.Burst({
count: 25,
children: {
radius: { 2: 8 },
angle: { 0: 360 },
x: { -50: 50 },
y: { -50: 50 }
}
});Каждый элемент получает случайное значение в заданных пределах. Это создаёт эффект естественного шума, полезного для:
Количество элементов влияет не только на пространственное, но и на
временное распределение. mo.js позволяет растягивать анимации во времени
через delay и duration.
const burst = new mojs.Burst({
count: 15,
children: {
duration: { 300: 1000 },
delay: { 0: 200 }
}
});В результате:
Хотя mo.js не ограничивается радиальными эффектами, можно искусственно формировать сеточную структуру через вычисление координат.
const gridBurst = new mojs.Burst({
count: 16,
children: {
x: (i) => (i % 4) * 20,
y: (i) => Math.floor(i / 4) * 20,
shape: 'rect',
radius: 5
}
});Здесь распределение строится по принципу:
Такой подход используется для пиксельных эффектов и структурированных вспышек.
При увеличении количества частиц важно управлять не только их распределением, но и группировкой. mo.js позволяет создавать несколько слоёв children внутри одного burst:
const burst = new mojs.Burst({
count: 20,
children: [
{
shape: 'circle',
radius: { 2: 6 },
fill: 'yellow',
degreeShift: 0
},
{
shape: 'circle',
radius: { 1: 3 },
fill: 'white',
degreeShift: 180
}
]
});В этом случае создаются два подтипа элементов, распределённые по разным характеристикам. Это позволяет формировать:
Количество элементов может быть вычисляемым значением, зависящим от внешних факторов: размера экрана, координат клика, интенсивности события.
const size = window.innerWidth;
const burst = new mojs.Burst({
count: Math.floor(size / 50),
children: {
radius: { 2: 10 }
}
});Это создаёт адаптивную систему, где плотность эффекта пропорциональна доступному пространству.
Количество элементов напрямую влияет на восприятие сцены:
Однако увеличение count без перераспределения параметров приводит к визуальной перегрузке. Поэтому важна синхронизация:
Каждый элемент в mo.js — это отдельный tween. При увеличении count растёт количество одновременно активных анимаций, что влияет на:
Оптимизация достигается через:
Комбинирование различных методов распределения позволяет создавать сложные визуальные структуры:
const burst = new mojs.Burst({
count: 40,
children: {
radius: { 1: 8 },
angle: { 0: 360 },
delay: { 0: 300 },
x: (i) => Math.cos(i) * 30,
y: (i) => Math.sin(i) * 30
}
});Такие комбинации позволяют управлять не только количеством элементов, но и их структурной организацией, превращая набор частиц в управляемую систему визуального поведения.