В библиотеке mo.js анимационные примитивы разделены на несколько модулей, среди которых ключевыми являются Shape и Html. Их принципиальное различие заключается в уровне абстракции над графикой и способе взаимодействия с DOM и графическим контекстом.
Shape опирается на векторные примитивы и SVG-рендеринг, формируя анимации через математическое описание геометрии. Html работает непосредственно с DOM-элементами, изменяя их стили и трансформации через CSS.
Такое разделение формирует два разных подхода к построению анимаций: графический слой против документного слоя.
Модуль Shape ориентирован на создание и анимацию геометрических объектов, таких как круги, прямоугольники, многоугольники, звезды и пользовательские формы.
Основные особенности:
Каждая фигура описывается параметрически: радиус, количество лучей, углы, закругления, толщина обводки. В результате формируется векторный объект, который легко масштабируется без потери качества.
Ключевое свойство Shape — предсказуемость поведения при трансформациях. Изменение масштаба, поворота или смещения не приводит к пересчету потоковой верстки, так как объект существует в отдельном графическом контексте.
Html-модуль предназначен для работы с существующими элементами страницы. В отличие от Shape, он не создаёт графические примитивы, а управляет стилями уже существующих узлов DOM.
Основной принцип:
Html-анимации напрямую зависят от рендеринг-пайплайна браузера. Это означает, что любые изменения могут затрагивать перерасчёт компоновки, особенно при работе с свойствами, влияющими на поток документа.
Сильная сторона Html заключается в возможности анимировать реальные интерфейсные элементы: кнопки, блоки, текстовые контейнеры. Это делает модуль пригодным для UI-анимаций, где важна связь с логикой интерфейса.
Shape и Html используют разные наборы анимируемых параметров.
В Shape основными являются:
В Html используются:
Shape оперирует математическими параметрами, тогда как Html — стилевыми характеристиками визуального представления DOM-элемента.
Различия в производительности обусловлены уровнем абстракции и механизмом обновления кадров.
Shape:
Html:
При большом количестве объектов Shape демонстрирует более стабильное поведение, так как не вовлекает потоковую модель документа.
В mo.js обе системы могут интегрироваться в единый timeline, но ведут себя по-разному.
Shape-объекты существуют как независимые визуальные сущности внутри графического слоя. Их синхронизация осуществляется через общие таймлайны и параметры задержек.
Html-анимации привязаны к жизненному циклу DOM-элементов, поэтому их состояние может зависеть от изменений структуры страницы, видимости и каскада стилей.
В результате Shape обеспечивает более изолированную анимационную среду, тогда как Html тесно связан с состоянием интерфейса.
Transformations в Shape и Html реализуются по-разному.
В Shape:
В Html:
Shape-трансформации ближе к математическим операциям над объектом, Html — к визуальным эффектам поверх существующей структуры.
Shape использует SVG-ориентированную модель окрашивания:
Html использует CSS-цвета:
В Shape цвет является частью геометрического объекта, в Html — частью визуального оформления элемента.
Обе системы поддерживают работу с временными шкалами mo.js, однако механика различается.
Shape:
Html:
Shape обеспечивает более детерминированное поведение при сложных последовательностях анимаций, Html — более гибкую интеграцию с интерфейсом.
Shape:
Html:
Shape применяется для визуальных эффектов, абстрактной графики, частиц и декоративных анимаций. Html используется для интерфейсных переходов, микроанимаций и интерактивных элементов UI.