Спиральная анимация в mo.js формируется через набор параметров, управляющих геометрией кривой, плотностью витков, направлением движения и визуальными свойствами линии. Модуль спирали базируется на полярной системе координат, где каждая точка определяется радиусом и углом, изменяющимися во времени.
radius определяет базовый размер спирали и задаёт расстояние от центра до внешней границы траектории. Значение может быть фиксированным или изменяться в процессе анимации.
При использовании массива значений задаётся интерполяция:
radius: [0, 120]В этом случае траектория начинается в центре и постепенно расширяется до указанного предела. Поведение интерполяции зависит от easing-функции, которая управляет характером роста — линейным, ускоренным или замедленным.
Дополнительно может использоваться разделение по осям:
Асимметрия радиусов приводит к эллиптической деформации спирали.
turns определяет число полных оборотов вокруг центра. Этот параметр напрямую влияет на плотность структуры:
turns: 3При увеличении значения возрастает частота пересечений траектории, формируя более сложную геометрию. Дробные значения позволяют создавать неполные витки, что используется для создания эффектов затухания или незавершённости движения.
angle задаёт начальное смещение вращения. В комбинации с turns формируется итоговая ориентация всей спирали.
angle: 90Изменение угла влияет на:
При анимации angle может быть задан как функция времени, создавая эффект вращающейся системы координат.
direction управляет направлением развёртывания:
1 — по часовой стрелке-1 — против часовой стрелкиПри инверсии направления изменяется знак углового приращения, что приводит к зеркальному поведению всей траектории без изменения геометрии базовой формы.
x и y задают положение центра спирали в системе координат. Значения могут быть числовыми или процентными:
x: '50%',
y: '50%'При использовании процентов центр привязывается к размерам контейнера, что позволяет масштабировать сцену без перерасчёта абсолютных координат.
strokeWidth определяет толщину линии спирали. Этот параметр влияет на визуальную плотность и читаемость формы при наложении нескольких витков.
Дополнительные свойства визуализации:
Комбинация этих параметров формирует характер графического стиля спирали.
duration задаёт время полной анимации. В контексте спирали это период развёртывания всей кривой:
duration: 2000Скорость визуального построения определяется отношением длины траектории к времени анимации. При увеличении turns общая длина возрастает, что визуально замедляет движение при фиксированном duration.
Easing-функции влияют на распределение точек вдоль спирали. Наиболее значимые эффекты:
Использование пользовательских функций позволяет управлять локальной плотностью витков, изменяя кривизну без изменения геометрических параметров.
Параметр scale управляет общим размером спирали без изменения радиуса:
scale: 1.5При анимации scale может изменяться динамически, создавая эффект расширения или сжатия уже построенной траектории.
Все основные параметры могут быть представлены функциями, зависящими от времени или индекса:
radius: function(t) {
return 120 * t;
}Такой подход позволяет формировать нелинейные структуры, где геометрия спирали изменяется в процессе построения.
Изменение turns без корректировки radius приводит к изменению плотности витков без изменения внешнего диаметра. Изменение angle при фиксированном turns создаёт эффект фазового смещения. Взаимодействие direction и easing определяет визуальное направление энергетического потока анимации.
При одновременной модификации radius, turns и duration формируется полный контроль над: