Встроенные типы фигур

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

Конструкция Shape включает несколько уровней абстракции: геометрия, стилизация, анимационные трансформации. Каждая фигура наследует общий набор свойств, но отличается внутренней реализацией пути (path) и поведением при трансформации.

Круг (circle)

Круг является наиболее базовой и часто используемой формой. Он задаётся значением shape: 'circle' и представляет собой окружность с равномерной геометрией без углов и рёбер.

Ключевые особенности:

  • равномерная радиальная симметрия
  • стабильное масштабирование без искажений
  • оптимальная производительность при анимациях масштабирования и изменения прозрачности

Типичные параметры:

  • radius — определяет размер окружности
  • stroke и strokeWidth — управление контуром
  • fill — заливка

Поведение при анимации:

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

Прямоугольник (rect)

Прямоугольная форма задаётся через shape: 'rect'. Представляет собой геометрию с четырьмя прямыми углами и независимыми осями ширины и высоты.

Особенности:

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

Параметры:

  • rx, ry — скругление углов
  • width, height — размеры фигуры
  • angle — поворот в градусах

Поведение:

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

Многоугольник (polygon)

Многоугольник (shape: 'polygon') представляет собой замкнутую фигуру с заданным количеством сторон. Чаще всего используется для создания треугольников, пятиугольников и более сложных симметричных форм.

Основные характеристики:

  • параметр points задаёт количество вершин
  • равномерное распределение углов по окружности
  • симметричное поведение при трансформациях

Ключевые параметры:

  • points — число сторон (например, 3, 5, 6, 8)
  • radius — радиус описанной окружности

Поведение:

  • увеличение числа точек приближает форму к кругу
  • низкое количество точек усиливает геометрическую агрессивность анимации

Звезда (star)

Фигура shape: 'star' строится на чередовании внешних и внутренних радиусов, создавая лучевую структуру.

Особенности:

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

Параметры:

  • points — количество лучей
  • innerRadius — внутренний радиус
  • outerRadius — внешний радиус

Поведение:

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

Кривая (curve) и зигзаг (zigzag)

Формы curve и zigzag относятся к декоративным линиям, основанным на сегментированных или волнообразных путях.

Curve

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

Характеристики:

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

Zigzag

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

Особенности:

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

Крест (cross) и знак равенства (equal)

Эти формы представляют собой символические геометрические конструкции.

Cross

shape: 'cross' формирует пересекающиеся линии под прямым углом.

Особенности:

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

Equal

shape: 'equal' состоит из двух параллельных линий.

Характеристики:

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

Сердце (heart)

Фигура сердца строится на основе кривых Безье, формирующих узнаваемый силуэт.

Особенности:

  • асимметричная верхняя часть
  • плавное сужение к нижней точке
  • высокая сложность внутреннего path

Поведение:

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

Общие параметры встроенных фигур

Все встроенные формы mo.js наследуют единый набор управляющих свойств, определяющих их визуальное поведение.

Геометрические параметры

  • radius — базовый размер
  • x, y — позиционирование
  • angle — поворот

Визуальные свойства

  • fill — цвет заливки
  • stroke — цвет обводки
  • strokeWidth — толщина линии
  • opacity — прозрачность

Поведенческие параметры

  • duration — длительность анимации
  • delay — задержка старта
  • easing — функция плавности

Комбинирование форм в burst-эффектах

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

Примеры поведения:

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

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

Взаимодействие формы и трансформаций

Встроенные фигуры реагируют на стандартные трансформации SVG/Canvas-уровня, включая масштабирование и вращение. Однако каждая геометрия имеет собственные особенности деформации:

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

Влияние формы на анимационную выразительность

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

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