Радиус и угол поворота

Базовая геометрия анимаций в mo.js опирается на две ключевые величины: радиус и угол поворота. Эти параметры определяют траекторию движения частиц, форму взрывов (burst-анимаций), распределение элементов по окружности и визуальную динамику композиции.

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

Базовое поведение радиуса

В простейшей форме радиус задаёт максимальное удаление частиц:

const burst = new mojs.Burst({
  radius: { 0: 120 },
  count: 10,
  children: {
    shape: 'circle',
    radius: 5
  }
});

Здесь radius: { 0: 120 } означает, что анимация начинается с нулевого радиуса и расширяется до 120 пикселей.

Ключевые моменты поведения:

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

Анимация изменения радиуса

mo.js поддерживает tween-анимацию значений, что позволяет создавать динамическое расширение:

radius: { 20: 180 }

Такой подход используется для:

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

Радиус и плотность частиц

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

При этом:

  • малый радиус → высокая плотность
  • большой радиус → разреженное распределение
  • увеличение count компенсирует рост радиуса

Угол поворота и распределение элементов

Угол определяет начальную ориентацию системы координат и влияет на то, как элементы распределяются по окружности.

Базовая концепция угла

В burst-анимациях угол задаёт стартовую точку распределения частиц:

const burst = new mojs.Burst({
  radius: { 0: 100 },
  angle: 45,
  count: 8,
  children: {
    shape: 'line',
    radius: { 10: 0 }
  }
});

Значение angle: 45 смещает начальную точку распределения на 45 градусов относительно оси X.

Геометрический смысл

  • 0° — вправо по оси X
  • 90° — вверх по оси Y
  • 180° — влево
  • 270° — вниз

Таким образом, угол задаёт базовую ориентацию системы координат burst-эффекта.

Радиально-угловое распределение

Радиус и угол работают совместно, формируя полярную систему координат.

Каждая частица вычисляет своё положение как:

  • расстояние от центра = радиус
  • направление = угол + смещение

Равномерное распределение

mo.js автоматически распределяет частицы по окружности:

const burst = new mojs.Burst({
  radius: { 0: 150 },
  count: 12,
  angle: 0,
  children: {
    radius: { 6: 0 }
  }
});

В этом случае угол между элементами равен:

360° / count = 30°

Каждый элемент получает свой сектор окружности.

Влияние радиуса на траектории движения

Радиус в mo.js не ограничивается статическим значением. Он может управлять:

  • длиной траектории
  • скоростью визуального удаления
  • масштабом композиции

Радиус как функция времени

radius: { 0: 200, easing: 'cubic.out' }

Использование easing-функций изменяет характер движения:

  • linear — равномерное расширение
  • ease-out — замедление на финальной стадии
  • ease-in — ускорение в начале

Угол поворота отдельных элементов

Кроме общего угла burst, каждый child-элемент может иметь собственный поворот.

children: {
  shape: 'rect',
  rotate: { 0: 180 },
  radius: { 10: 0 }
}

Здесь:

  • каждый элемент вращается при движении
  • создаётся эффект закручивания
  • усиливается ощущение динамики

Связь радиуса и угловой скорости

При создании сложных анимаций радиус часто комбинируется с вращением:

  • увеличение радиуса
  • одновременный rotateZ
children: {
  shape: 'circle',
  radius: { 8: 0 },
  rotate: { 0: 360 }
}

Это создаёт эффект:

  • центробежного движения
  • спирального разлёта
  • визуального вихря

Радиус как инструмент композиции

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

Концентрические слои

const burst1 = new mojs.Burst({
  radius: { 0: 80 },
  count: 6
});

const burst2 = new mojs.Burst({
  radius: { 0: 140 },
  count: 10
});

Такая комбинация создаёт:

  • внутренний плотный слой
  • внешний разреженный слой
  • ощущение глубины

Смещение центра и влияние на угол

При добавлении смещения центр системы координат меняется, и угол начинает работать относительно новой точки.

const burst = new mojs.Burst({
  x: 200,
  y: 100,
  radius: { 0: 120 },
  angle: 90
});

Изменение центра:

  • изменяет визуальную ось вращения
  • влияет на направление распределения
  • создаёт эффект локального источника энергии

Асимметричный радиус

mo.js позволяет задавать неравномерные радиусы:

radiusX: { 0: 150 },
radiusY: { 0: 60 }

Такое поведение формирует:

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

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

Взаимодействие радиуса с stagger-анимацией

При использовании stagger распределение времени запуска влияет на восприятие радиуса:

const burst = new mojs.Burst({
  radius: { 0: 120 },
  count: 20,
  children: {
    delay: 'stagger(50)'
  }
});

Эффекты:

  • радиус раскрывается по очереди
  • создаётся волновой эффект
  • усиливается ощущение глубины движения

Радиус в комбинации с кривыми движения

Хотя burst-анимации основаны на радиальном распространении, радиус может сочетаться с path-анимациями:

const shape = new mojs.Shape({
  shape: 'circle',
  path: 'M0,0 C50,100 150,100 200,0',
  radius: 10
});

Здесь радиус уже выполняет вспомогательную роль:

  • определяет размер объекта
  • не влияет напрямую на траекторию
  • но усиливает восприятие движения

Угловые трансформации в timeline-анимациях

При использовании timeline угол может изменяться синхронно с другими параметрами:

const timeline = new mojs.Timeline();

timeline.add(
  new mojs.Burst({
    radius: { 0: 100 },
    angle: { 0: 360 },
    count: 12
  })
);

Это создаёт:

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

Геометрическая интерпретация системы радиус–угол

Совместная работа радиуса и угла фактически формирует полярную систему координат:

  • радиус задаёт модуль вектора
  • угол задаёт направление вектора

Каждая частица в burst-анимации — это результат преобразования:

  • полярных координат в декартовы
  • с последующим визуальным отображением

Практические паттерны использования

Вспышка из центра

radius: { 0: 150 },
angle: 0,
count: 16

Используется для:

  • кликов
  • уведомлений
  • UI-откликов

Вращающийся взрыв

radius: { 0: 120 },
angle: { 0: 360 }

Используется для:

  • загрузочных эффектов
  • декоративных анимаций
  • циклических переходов

Эллиптический выброс

radiusX: { 0: 160 },
radiusY: { 0: 60 },
angle: 30

Используется для:

  • направленных эффектов
  • симуляции ветра или потока
  • интерфейсных акцентов

Поведение при экстремальных значениях

При значительном увеличении радиуса:

  • частицы выходят за пределы экрана
  • теряется визуальная связность центра
  • эффект становится «взрывным» в буквальном смысле

При малых значениях:

  • формируется компактный кластер
  • акцент смещается на детализацию движения
  • усиливается ощущение плотности энергии

Взаимодействие радиуса и угла с визуальной иерархией

В сложных сценах:

  • малый радиус → фоновые эффекты
  • средний радиус → основной слой
  • большой радиус → акцентные вспышки

Угол в таких системах определяет:

  • направление визуального внимания
  • динамику переходов между слоями
  • симметрию композиции
Оглавление