Burst в mo.js представляет собой высокоуровневую анимационную конструкцию, предназначенную для генерации множества синхронных или частично синхронизированных эффектов разлёта частиц из одной точки. В основе лежит идея радиального распределения множества анимационных объектов (shape instances), которые получают согласованное поведение во времени, пространстве и параметрах трансформации. Такая модель используется для имитации взрывов, всплесков, искр, конфетти-эффектов и любых сцен, где требуется быстрое распространение визуальных элементов из центра.
Burst строится как контейнер, управляющий набором дочерних анимационных объектов. Каждый Burst содержит конфигурацию, которая описывает:
Внутри Burst используются shape-инстансы, создаваемые на основе базовых примитивов mo.js (circle, rect, polygon и др.). Эти примитивы не существуют изолированно: каждый элемент получает собственный timeline, но управляется общей синхронизацией Burst-контейнера.
Ключевой момент заключается в том, что Burst не является одной анимацией. Это композиционный объект, который агрегирует множество tween-ов, связывая их единым пространственно-временным законом распределения.
Основной механизм Burst — радиальное распределение элементов относительно центральной точки. Каждый элемент получает угол и радиус, вычисляемые на основе параметров конфигурации.
Типичная логика распределения:
Результат — формирование кольцевой или сферической структуры движения частиц.
Особое значение имеет параметр degree (или аналогичные конфигурации), определяющий полный угол охвата:
Радиальная модель позволяет комбинировать симметричное и асимметричное поведение частиц без изменения базовой логики анимации.
Внутренний массив children определяет свойства каждого отдельного элемента Burst. Эти элементы наследуют базовые параметры, но могут иметь вариативность через функции или диапазоны значений.
Ключевые параметры children:
Каждый из этих параметров может быть задан как:
Это создаёт стохастическую вариативность внутри структурированной анимации, что критично для имитации природных процессов.
Burst оперирует двумя уровнями временной модели:
Глобальный timeline задаёт момент старта и общую длительность эффекта. Локальные timelines определяют фазовые сдвиги между частицами.
Синхронизация достигается через:
Stagger особенно важен для создания эффекта расширяющегося взрыва, когда частицы не стартуют одновременно, а создают волновую структуру.
Каждый элемент Burst подвергается набору трансформаций:
Движение чаще всего задаётся векторно: угол + скорость формируют направление разлёта. При этом Burst может использовать как линейные траектории, так и криволинейные, если подключаются дополнительные easing-функции.
Расширенные конфигурации позволяют задавать:
Создание Burst осуществляется через конструктор mojs.Burst, который принимает объект конфигурации.
const burst = new mojs.Burst({
radius: { 0: 100 },
count: 12,
children: {
shape: 'circle',
radius: 20,
fill: 'deeppink',
duration: 1500,
easing: 'cubic.out'
}
});В данном случае задаётся:
radius как объект {0: 100} означает интерполяцию от начального значения к конечному, что формирует эффект расширяющегося фронта.
Сложные визуальные эффекты строятся через наложение нескольких Burst-слоёв. Каждый слой имеет собственные параметры:
Композиция нескольких Burst позволяет формировать:
Пример многослойной конфигурации:
const burstA = new mojs.Burst({
radius: { 0: 80 },
count: 10,
children: {
shape: 'rect',
fill: 'white',
duration: 1200
}
});
const burstB = new mojs.Burst({
radius: { 0: 140 },
count: 6,
children: {
shape: 'zigzag',
fill: 'yellow',
duration: 1600
}
});Слои различаются не только визуально, но и по динамике, что создаёт глубину эффекта.
Одной из ключевых особенностей Burst является возможность введения контролируемой случайности. Она применяется в:
Это позволяет избегать механической повторяемости анимации.
Пример:
children: {
radius: { 5: 25 },
fill: ['red', 'orange', 'yellow'],
delay: 'stagger(10)'
}Функция stagger распределяет задержки между элементами, формируя последовательный поток вместо единовременного запуска.
Burst часто привязывается к событиям интерфейса:
Механизм основан на запуске play() в момент события, с передачей координат курсора как центра эффекта.
document.addEventListener('click', (e) => {
burst.tune({ x: e.pageX, y: e.pageY }).replay();
});tune изменяет позицию центра, а replay перезапускает анимацию без пересоздания объекта.
Burst может создавать значительную нагрузку при высоком count. Для оптимизации применяются:
Особенно важно избегать создания новых Burst-объектов в каждом событии без кеширования, так как это увеличивает давление на GC и ухудшает плавность анимации.
Burst часто комбинируется с:
Timeline позволяет синхронизировать Burst с другими эффектами, например:
Burst в этом случае становится частью более крупного анимационного сценария, а не изолированным эффектом.