В основе ShapeSwirl лежит представление движения частицы в полярных координатах:
r(t) изменяется во времениθ(t) задаёт вращение вокруг центраx(t)=r(t)((t))
y(t)=r(t)((t))
Функция радиуса в ShapeSwirl обычно задаётся как затухающая или возрастающая кривая:
Угол вращения задаётся как сумма базового угла и временной составляющей:
(t)=_0 + t
где:
θ₀ — начальный уголω — угловая скоростьShapeSwirl в mo.js строится вокруг набора параметров, определяющих форму вихря и поведение частиц.
Эти параметры задают исходное распределение элементов в пространстве до начала временной интерполяции.
Временная ось в ShapeSwirl является управляющим фактором, влияющим одновременно на радиус, угол и визуальные свойства объекта.
Комбинация этих параметров создаёт эффект «растворяющегося вихря», где элементы теряют массу по мере удаления от центра.
ShapeSwirl использует двухуровневую систему преобразований:
Глобальное движение группы
Локальное движение элемента
Суперпозиция этих уровней создаёт эффект хаотически-организованного движения.
Ключевая особенность ShapeSwirl заключается в том, что параметры не фиксированы, а интерполируются.
Радиус часто описывается функцией:
r(t)=r_0(1 - t)^k
где:
r₀ — начальный радиусk — коэффициент затуханияt — нормализованное время (0…1)При k > 1 создаётся ускоренное схлопывание вихря, при
k < 1 — плавное расширение.
Каждый кадр анимации формируется через последовательность операций:
tОсобенность реализации mo.js заключается в том, что вычисления оптимизированы через предрасчёт кривых easing, минимизируя нагрузку на runtime.
ShapeSwirl масштабируется за счёт групповой обработки:
Фазовый сдвиг часто задаётся как:
t_i = t + t_i
где Δtᵢ — индивидуальная задержка элемента.
Это позволяет избежать синхронного движения и создаёт эффект турбулентности.
Easing в ShapeSwirl определяет характер закрутки:
Easing влияет одновременно на:
ShapeSwirl часто используется совместно с burst-эффектами:
Такое сочетание создаёт каскадную модель:
Для обеспечения высокой частоты кадров применяются следующие техники:
Особенно критично уменьшение количества вызовов sin и
cos, так как ShapeSwirl интенсивно использует полярные
преобразования.
При экстремальных значениях параметров возникают характерные эффекты:
degree приводит к визуальному
«замыканию» траекторииspeed создаёт алиасинг движенияradiusX/radiusY вызывает эллиптическую
деградацию вихряСтабильная работа достигается при согласовании угловой скорости и радиального затухания.
ShapeSwirl выступает базовым строительным блоком для более сложных сцен:
Композиция достигается через наложение нескольких независимых систем координат, каждая из которых имеет собственный набор параметров движения и интерполяции.