Изменения между версиями

Первые публичные версии mo.js формировались вокруг идеи декларативной анимации на Canvas и SVG с минимальным количеством кода. Архитектура строилась на трёх базовых слоях: Tween, Timeline и наборе визуальных примитивов (Shape, Burst, Html, Spriter).

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

Переход от Tween-ориентированной модели к композиционной

В ранних версиях Tween выступал центральной единицей времени. Любая анимация представляла собой либо одиночный Tween, либо группу Tween внутри Timeline.

Позднее архитектура стала смещаться в сторону композиции объектов:

Tween перестал быть единственным строительным блоком
Timeline получил роль координатора нескольких сущностей
Shape и Burst стали самостоятельными анимационными единицами с собственными жизненными циклами

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

Изменения в API Shape и Burst

Одним из наиболее заметных направлений эволюции стали изменения в API визуальных примитивов.

Shape

Ранние версии Shape предполагали фиксированный набор типов фигур, где расширение происходило через внутренние модификаторы. Позднее структура стала более декларативной:

параметр shape получил более строгую типизацию
появились явные свойства stroke, fill, strokeWidth
управление трансформациями отделилось от визуальных свойств

Также изменился подход к анимации свойств: вместо неявных переходов через общий tween-параметр стало возможным явно анимировать каждое свойство.

Burst

Burst в ранней реализации был тесно связан с системой частиц внутри библиотеки. В последующих версиях он стал более независимым объектом:

разделение генерации частиц и их анимации
улучшенная контрольная система радиуса, угла и распределения
появление более гибких easing-параметров для отдельных частиц

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

Timeline и изменения модели синхронизации

Timeline изначально представлял собой простую контейнерную сущность, объединяющую несколько Tween.

Позднее он получил расширенную функциональность:

поддержка вложенных таймлайнов
управление глобальными задержками и смещениями
улучшенная система управления временем (pause, resume, replay)

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

Переход к более явной модели easing

Система easing в mo.js эволюционировала от простых строковых идентификаторов к более структурированному описанию кривых.

В ранних версиях использовались:

строковые ключи (ease.in, ease.out, bounce)
ограниченный набор встроенных кривых

Позднее добавились:

поддержка кастомных Bezier-кривых
унификация синтаксиса easing во всех модулях
возможность передачи easing как объекта с параметрами

Это изменение сделало анимации более предсказуемыми при сложных переходах.

Изменения в системе модулей и сборки

Изначально mo.js распространялась как монолитный UMD-бандл, ориентированный на подключение через <script>.

Позднее произошёл переход к более современному подходу:

поддержка ES6-модулей
возможность точечного импорта (import { Tween, Shape })
разделение внутренних пакетов на логические части

Это повлияло на:

размер итогового бандла
возможность tree-shaking
интеграцию с современными сборщиками (Webpack, Rollup)

Изменения в работе с DOM и Canvas

В ранних версиях mo.js DOM-ориентированные и canvas-ориентированные анимации имели различную внутреннюю реализацию.

Позднее произошло сближение моделей:

унификация системы трансформаций
единый подход к координатам и масштабированию
улучшенная синхронизация между DOM и Canvas слоями

Особенно заметным стало улучшение производительности при большом количестве одновременно активных анимаций.

Событийная модель и lifecycle hooks

Система событий в mo.js также претерпела изменения.

Ранний API:

ограниченный набор событий (start, complete)
отсутствие гибких хуков внутри анимационного цикла

Позднее добавились:

update-хуки для отслеживания прогресса анимации
более детальная модель состояния (play, pause, stop, replay)
возможность привязки пользовательской логики к каждому этапу

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

Изменения в производительности и рендеринге

С ростом сложности анимационных сцен возникла необходимость оптимизации рендеринга.

Ключевые изменения:

уменьшение количества перерасчётов layout при DOM-анимациях
оптимизация requestAnimationFrame-цикла
снижение нагрузки на GC за счёт переиспользования объектов частиц
улучшение batching для canvas-рендеринга

Также была переработана система обновления состояния, что уменьшило количество лишних вычислений при одновременной работе нескольких Timeline.

Совместимость и breaking changes

В процессе развития mo.js несколько раз происходили изменения, нарушающие обратную совместимость:

переименование параметров конфигурации (например, унификация duration и delay)
изменение структуры вложенных объектов анимации
отказ от части неиспользуемых или экспериментальных API
переработка внутренних дефолтных значений easing и scale

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

Изменения в системе частиц и визуальных эффектов

Система частиц в Burst и связанных эффектах эволюционировала от фиксированных шаблонов к параметрической генерации.

В ранней модели:

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

В более поздних версиях:

появилась вариативность распределений (random, grid-like, spiral)
улучшилась работа с физическими параметрами (скорость, ускорение, затухание)
добавлена более точная синхронизация фаз анимации

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

Некоторые ранние возможности библиотеки со временем были удалены или заморожены:

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

Причина изменений заключалась в стремлении к стабильности ядра и предсказуемому поведению в продакшене.

Итоговая трансформация архитектурного подхода

Эволюция mo.js характеризуется переходом от экспериментального набора визуальных инструментов к более структурированной системе анимационных объектов.

Ключевые направления изменений:

унификация модели времени и синхронизации
переход к композиционному построению сцен
улучшение производительности рендеринга
стандартизация API и easing-системы
адаптация к современным инструментам сборки

Эти изменения сформировали устойчивую архитектурную основу, на которой строится работа с библиотекой в современных проектах.