Отличия от Shape модуля

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

Shape — это декларативный объект, описывающий:

  • геометрию (circle, rect, polygon и др.)
  • визуальные свойства (цвет, обводка, прозрачность)
  • параметры трансформации (scale, rotate, translate)
  • тайминг анимации

Другие модули строятся поверх этой концепции, расширяя её.

Отличия в уровне абстракции

Shape работает на низком уровне абстракции:

  • описывает один элемент
  • требует явного задания всех параметров
  • не содержит сложной логики движения

Другие модули:

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

Пример:

const shape = new mojs.Shape({
  shape: 'circle',
  radius: 20,
  fill: 'red',
  scale: { 0: 1 },
  duration: 1000
});

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

Для сравнения, Burst:

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

Здесь автоматически создаётся группа элементов с распределением по радиусу.

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

Shape:

  • управляет только одним DOM/SVG элементом
  • не имеет встроенной поддержки коллекций
  • повторное использование требует ручного создания экземпляров

Другие модули:

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

Пример различия:

Shape (ручное создание):

for (let i = 0; i < 5; i++) {
  new mojs.Shape({
    left: i * 30,
    top: 0
  }).play();
}

Burst (автоматизация):

new mojs.Burst({
  count: 5,
  radius: 50
}).play();

Поведение и динамика движения

Shape:

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

Другие модули:

  • реализуют готовые алгоритмы движения
  • используют кривые Безье, случайность, swirl-эффекты
  • поддерживают динамическое распределение

Например, ShapeSwirl:

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

Параметры анимации

Shape:

  • анимация задаётся напрямую через свойства
  • поддерживает tween-подход (from → to)
  • требует явного описания каждого параметра

Пример:

scale: { 0: 1 },
opacity: { 1: 0 }

Другие модули:

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

Пример:

children: {
  delay: 'stagger(100, rand(0, 200))'
}

Производительность и оптимизация

Shape:

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

Другие модули:

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

Важно:

  • при большом количестве объектов Burst или Swirl может быть менее эффективен, чем ручное управление Shape

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

Shape:

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

Другие модули:

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

Гибкость настройки

Shape:

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

Другие модули:

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

Работа с timeline

Shape:

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

Другие модули:

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

Расширяемость

Shape:

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

Другие модули:

  • не предназначены для расширения
  • работают как готовые решения
  • ограничены API библиотеки

Работа с SVG и DOM

Shape:

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

Другие модули:

  • управляют несколькими SVG-элементами
  • абстрагируют доступ к DOM
  • сложнее интегрируются в кастомные структуры

Сценарии использования

Shape:

  • одиночные анимации (кнопки, иконки)
  • кастомные эффекты
  • точечные визуальные элементы

Другие модули:

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

Итоговое сравнение по ключевым характеристикам

Характеристика Shape Другие модули
Уровень абстракции Низкий Высокий
Количество объектов 1 Множество
Гибкость Максимальная Ограниченная
Простота Требует ручной настройки Готовые решения
Производительность Высокая Зависит от количества
Расширяемость Высокая Низкая

Ключевая роль Shape в экосистеме mo.js

Несмотря на наличие более сложных модулей, Shape остаётся фундаментальным элементом:

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

Все остальные сущности можно рассматривать как надстройки, автоматизирующие работу с множеством Shape-объектов и добавляющие поведенческую логику.

Оглавление