Количество и тип частиц

Количество частиц в mo.js определяется параметром count и напрямую задаёт плотность, визуальную насыщенность и поведенческую сложность анимации. При увеличении числа частиц возрастает не только визуальный объём эффекта, но и нагрузка на вычислительный процесс, поскольку каждая частица представляет собой отдельный анимируемый объект с собственной траекторией, стилем и временной функцией.

В системе mojs.Burst параметр count задаёт количество дочерних элементов, создаваемых при запуске эффекта. Эти элементы распределяются вокруг центра по заданной геометрии: углу, радиусу и функции рассеивания. Базовая модель поведения предполагает равномерное распределение частиц по окружности, однако на практике распределение часто модифицируется случайностью и анимационными кривыми.

При малом значении count (от 3 до 8) формируется минималистичная структура, в которой каждая частица воспринимается как отдельный визуальный акцент. Такие конфигурации применяются в интерфейсах, где важна читаемость и отсутствие перегрузки.

Средние значения count (от 10 до 30) создают плотные всплески, характерные для интерактивных событий: кликов, подтверждений действий, переходов состояний. В этом диапазоне начинает проявляться эффект групповой динамики — частицы воспринимаются не как отдельные элементы, а как единое облако движения.

Высокие значения count (от 40 и выше) формируют плотные визуальные облака, где индивидуальная траектория каждой частицы становится менее значимой, а доминирует общий эффект взрыва или распада. При этом возрастает вероятность перекрытия частиц и визуального шума, что требует управления прозрачностью, масштабом и временем жизни.

Типы частиц в mo.js

Тип частицы определяется параметром shape внутри объекта children. Этот параметр задаёт геометрию визуального элемента и влияет на восприятие движения и плотности.

Основные формы:

  • circle — базовая круглая частица, используется для мягких, нейтральных эффектов
  • rect — прямоугольная форма, создаёт более «жёсткое» визуальное ощущение
  • polygon — многоугольник с изменяемым числом сторон
  • line — линейный сегмент, подчёркивает направление движения
  • cross — крестообразная форма, усиливает ощущение разлёта
  • zigzag — ломаная форма, используется для динамичных, «энергетических» эффектов

Каждая форма по-разному взаимодействует с восприятием движения. Например, круги визуально сглаживают анимацию, тогда как линии усиливают ощущение скорости и направления.

Комбинирование типов частиц

В mo.js допускается использование разных типов частиц в рамках одного Burst. Это реализуется через массив конфигураций или через функцию генерации детей. Такой подход позволяет создавать неоднородные визуальные структуры, где каждая частица имеет собственную форму, масштаб и поведение.

Пример вариативной конфигурации:

const burst = new mojs.Burst({
  radius: { 0: 120 },
  count: 20,
  children: [
    {
      shape: 'circle',
      fill: '#FF6B6B'
    },
    {
      shape: 'rect',
      fill: '#4ECDC4'
    },
    {
      shape: 'polygon',
      points: 6,
      fill: '#FFD93D'
    }
  ]
});

В подобных конфигурациях распределение типов может быть равномерным или управляемым через функцию, возвращающую параметры для каждого индекса частицы.

Связь количества частиц с геометрией распределения

Количество частиц тесно связано с угловым шагом их размещения. При равномерном распределении используется деление полного круга:

  • угол между частицами ≈ 360° / count

При увеличении count угловой шаг уменьшается, что приводит к более плотному визуальному кольцу. Однако в mo.js редко используется строго детерминированное распределение — чаще применяется случайное смещение угла:

  • базовый угол + random(offset)

Это создаёт эффект естественного разброса и снижает механистичность анимации.

Масштабирование частиц при изменении количества

При увеличении count часто требуется компенсировать визуальную перегрузку через уменьшение размера частиц. В mo.js это достигается параметром radius, который может быть задан как диапазон:

radius: { 0: 30 }

или фиксированное значение:

radius: 10

При большом количестве частиц используются меньшие значения радиуса, чтобы избежать пересечения и визуальной каши. При малом количестве радиус увеличивается, чтобы компенсировать недостаток плотности.

Временные характеристики и количество частиц

Каждая частица имеет собственный жизненный цикл, задаваемый параметрами duration, delay и speed. При увеличении count часто применяется фазовое смещение (staggering), чтобы избежать одновременного старта всех элементов.

Фазовое распределение:

delay: 'stagger(50)'

Такое распределение создаёт ощущение волнового выброса, где частицы появляются не одновременно, а последовательно.

Типы частиц и их поведенческие различия

Различие между типами частиц проявляется не только визуально, но и в динамике:

  • circle сохраняет стабильность формы при масштабировании
  • rect демонстрирует выраженные углы, усиливающие эффект вращения
  • polygon добавляет сложность при изменении числа сторон
  • line усиливает направленность движения
  • zigzag визуально имитирует энергию или шум

При одинаковых параметрах движения разные формы дают разный эмоциональный и визуальный отклик.

Адаптация типа частиц под количество

При небольшом количестве частиц допустимо использование сложных форм (polygon, zigzag), поскольку каждая частица воспринимается индивидуально. При большом количестве предпочтение отдается простым формам (circle, rect), так как сложная геометрия при высокой плотности приводит к визуальной перегрузке и снижению различимости элементов.

Влияние типа частиц на производительность

Каждая форма требует разного объёма вычислений при рендеринге:

  • простые формы (circle, rect) — минимальная нагрузка
  • сложные формы (polygon, zigzag) — увеличенная нагрузка из-за расчёта вершин и путей

При увеличении count нагрузка масштабируется линейно, однако сложность формы может давать нелинейный рост затрат, особенно при высокой частоте анимационных кадров.

Управление разнообразием частиц

Для создания неоднородных эффектов применяется параметрическая генерация:

children: {
  shape: () => ['circle', 'rect', 'polygon'][Math.floor(Math.random() * 3)],
  radius: { 0: 'rand(10, 30)' }
}

Такой подход позволяет объединять большое количество частиц с различными характеристиками без ручного перечисления конфигураций.

Плотность визуального поля

Соотношение количества и типа частиц формирует плотность визуального поля. Плотность определяется не только числом элементов, но и их размером, формой и прозрачностью. При высокой плотности:

  • уменьшается различимость отдельных частиц
  • усиливается эффект единого движения
  • возрастает значимость общей траектории

При низкой плотности:

  • каждая частица воспринимается индивидуально
  • усиливается внимание к траектории
  • возрастает роль формы

Баланс между количеством и типом

Сочетание количества и типа частиц формирует базовую выразительность эффекта. Простые формы при высоком количестве создают ощущение энергии и скорости. Сложные формы при малом количестве формируют акцентированные, детализированные вспышки. Комбинации этих параметров позволяют управлять визуальным языком интерфейса без изменения логики взаимодействия.

Оглавление