Popmotion построена как модульная функциональная система управления анимацией, в которой каждый элемент рассматривается как поток значений во времени. Архитектура библиотеки опирается на идею композиции небольших независимых примитивов, которые можно объединять в сложные анимационные сценарии без жёсткой связности и без привязки к конкретной платформе рендеринга.
В основе Popmotion лежит функциональный подход. Вместо классовой иерархии используется набор чистых функций, возвращающих либо поток значений, либо управляющую сущность (action).
Ключевая особенность архитектуры заключается в том, что:
Такой подход снижает связанность компонентов и позволяет легко комбинировать разные типы анимаций: физические, временные, прерываемые и реактивные.
Центральное понятие архитектуры — action. Action представляет собой исполняемый поток, который:
Любая анимация в Popmotion является action или производной от него.
Типичная модель action:
start() — инициализация выполненияstop() — остановкаpipe() — передача данных дальше по цепочкеtransform() — изменение выходных значенийAction можно рассматривать как минимальную единицу вычисления анимации, аналог «наблюдаемого потока», но без строгого соответствия RxJS.
Вместо прямого изменения DOM или состояния объекта Popmotion оперирует значениями, которые проходят через цепочку преобразований.
Каждое значение:
Архитектурно это выглядит как однонаправленный поток:
Source → Transform → Sink
Такой подход делает систему предсказуемой и тестируемой, поскольку каждое звено цепочки изолировано.
Tween в Popmotion — это временной интерполятор, работающий на основе:
В архитектуре tween не является отдельной системой анимации, а лишь одним из источников значений.
Временная модель построена вокруг:
Tween превращает время в значение через функцию интерполяции, не зная ничего о DOM или рендеринге.
Одним из ключевых архитектурных решений является отделение физики от временной модели.
Physics-based animation включает:
Физический движок Popmotion работает не с временем, а с состоянием системы:
Это создаёт отдельный класс action, где входом является текущее состояние, а выходом — обновлённое состояние.
Архитектурно physics-слой не зависит от tween-слоя, что позволяет смешивать их через композицию.
Механизм pipe является фундаментальным для архитектуры
Popmotion.
Pipe выполняет:
Структура pipeline:
Каждая функция в цепочке:
Это позволяет строить сложные анимации из простых математических операций.
Transformers — это чистые функции преобразования значений:
Они отделены от источников данных и от механизмов исполнения.
Архитектурное значение transformers:
Фактически Popmotion разделяет «генерацию» и «обработку» данных.
Scheduler в Popmotion отвечает за синхронизацию всех action.
Он выполняет:
Scheduler использует requestAnimationFrame как базовый механизм, но логически отделён от конкретных анимаций.
Это позволяет:
Одна из сильных сторон архитектуры — возможность композиции.
Actions можно:
Типы композиции:
Композиция не требует глобального состояния, каждый action остаётся автономным.
Popmotion сознательно отделяет анимационную логику от рендеринга.
Render layer:
Пример архитектурного принципа:
Это делает Popmotion независимым от UI-фреймворков.
Потоки значений в Popmotion не мутируют состояние.
Каждый новый кадр:
Это уменьшает количество побочных эффектов и делает поведение анимации детерминированным.
Архитектура Popmotion можно разделить на несколько слоёв:
1. Source layer
2. Transformation layer
3. Execution layer
4. Output layer
Каждый слой не зависит от конкретной реализации другого.
Popmotion реализует упрощённую реактивную модель:
Но в отличие от классических reactive libraries, Popmotion не строит сложный graph зависимостей. Потоки остаются линейными и предсказуемыми.
Архитектура намеренно избегает:
Каждый action содержит только то, что ему необходимо для работы, либо получает данные через параметры.
Расширение Popmotion не требует изменения ядра.
Новые возможности создаются через:
Такой подход позволяет масштабировать систему без изменения архитектурного ядра.
Popmotion опирается на frame-based execution:
Это обеспечивает плавность и адаптивность под производительность устройства.
Все взаимодействие с внешним миром происходит на уровне sink-функций.
Core библиотека:
Эффекты локализуются в конце pipeline, что упрощает отладку и тестирование.
Easing-функции являются математическим слоем поверх временной модели.
Они:
Easing интегрируется в pipeline как обычный transformer, а не как часть tween-логики.
Каждый action может быть прерван в любой момент.
Это достигается за счёт:
Прерывание не ломает pipeline, так как значения не сохраняются глобально.
Popmotion можно описать как систему, в которой:
Такая архитектура создаёт предсказуемую, расширяемую и математически прозрачную модель анимации, где сложность строится из комбинации простых независимых элементов.