Угол раскрытия веера

Векторная анимация в mo.js строится вокруг параметрического управления формой, временем и пространственным распределением элементов. Одним из ключевых механизмов визуальной композиции выступает угловое распределение частиц в радиальных эффектах. Именно оно определяет, как визуальный «веер» раскрывается из центральной точки, формируя плотность, направленность и динамику взрыва или всплеска.

Геометрическая основа раскрытия

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

  • полный угол окружности: 360°
  • количество элементов: n
  • базовый шаг между элементами: 360° / n

Однако равномерное распределение — лишь частный случай. Основной инструмент художественной вариативности — ограничение сектора раскрытия, формирующего «веер».

Угол раскрытия как параметр формы

В mo.js для эффекта веерного распределения используется ограничение углового диапазона, внутри которого генерируются дочерние элементы. Этот диапазон задаёт направление и плотность всплеска.

Ключевая идея заключается в том, что вместо полного круга используется сектор:

  • минимальный угол (start angle)
  • максимальный угол (end angle)
  • разница между ними формирует угол раскрытия

Чем меньше этот диапазон, тем более направленным становится эффект. Чем больше — тем ближе он к круговому взрыву.

Реализация через Burst-модуль

В mo.js основной инструмент для радиальных эффектов — Burst. Он позволяет управлять количеством элементов, их радиусом и угловым распределением.

const burst = new mojs.Burst({
  radius:   { 0: 120 },
  count:    12,
  children: {
    shape: 'circle',
    radius: 6,
    fill:   'white'
  }
});

В данном случае угол распределения не ограничен, и элементы расходятся равномерно по окружности.

Ограничение угла раскрытия

Для формирования веера вводится параметр углового диапазона через angle и degree. Именно комбинация этих значений позволяет контролировать сектор эмиссии.

const burst = new mojs.Burst({
  radius:   { 0: 150 },
  count:    10,
  angle:    180,
  degree:   90,
  children: {
    shape: 'rect',
    radius: 5
  }
});

Здесь формируется полукруговое распределение с дополнительным ограничением раскрытия до 90°, что создаёт плотный направленный веер.

Интерпретация параметра degree

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

Механически это выглядит как:

  • есть центральное направление (angle)
  • вокруг него задаётся отклонение (± degree/2)
  • каждый элемент получает случайный угол внутри диапазона

Таким образом достигается контролируемая хаотичность.

Центрирование и смещение направления

При изменении angle меняется ориентация всего веера. Это позволяет «поворачивать» раскрытие без изменения его формы.

angle: 45,
degree: 60

Такой набор параметров задаёт веер, направленный по диагонали, с узким углом разброса.

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

Влияние количества элементов на восприятие угла

Параметр count тесно связан с углом раскрытия, хотя и не влияет на него напрямую. При одинаковом секторе:

  • малое количество элементов создаёт разреженный, «лучевой» эффект
  • большое количество формирует плотный поток

При узком угле увеличение count усиливает ощущение давления и направленной энергии.

Анимация раскрытия через трансформацию угла

Угол раскрытия может быть не статическим, а анимированным во времени. В mo.js поддерживается интерполяция параметров, что позволяет динамически расширять или сужать веер.

const burst = new mojs.Burst({
  radius:   { 0: 140 },
  angle:    { 0: 90 },
  degree:   { 10: 120 },
  count:    14,
  children: {
    radius: 4
  }
});

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

Синхронизация угла с радиусом

Эффект раскрытия становится визуально устойчивым только при согласованной динамике угла и радиуса. Если радиус увеличивается быстрее, чем расширяется угол, возникает эффект «вытянутого луча». При обратной зависимости формируется эффект рассыпания.

Основные типы синхронизации:

  • синхронное расширение: равномерное движение наружу
  • опережающий радиус: лучевая форма
  • опережающий угол: распад структуры

Множественные веера и пересечения углов

Сложные сцены строятся через наложение нескольких Burst-объектов с разными углами раскрытия. При этом важно избегать симметрии, если требуется естественность движения.

new mojs.Burst({
  angle: 0,
  degree: 40
});

new mojs.Burst({
  angle: 120,
  degree: 70
});

new mojs.Burst({
  angle: 240,
  degree: 50
});

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

Управление плотностью через угловое сжатие

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

  • усиление визуального направления
  • повышение читаемости траектории
  • формирование «луча» или «пучка»

При экстремально малых значениях degree поведение приближается к линейной траектории, где радиальная природа почти исчезает.

Взаимодействие угла и easing-функций

Хотя угол задаёт геометрию, временные функции влияют на восприятие раскрытия. При нелинейных easing-функциях визуальный центр тяжести смещается:

  • ускорение в начале усиливает эффект взрыва
  • замедление в конце подчёркивает рассеивание
  • S-образные кривые создают эффект «раскрывающегося цветка»

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

Оглавление