В основе анимационной системы лежит представление времени как непрерывной оси, на которой размещаются отдельные анимационные отрезки. Каждый отрезок описывает изменение свойств объекта от начального состояния к конечному в течение заданного интервала.
Временная шкала объединяет несколько анимаций в единый контекст, где их стартовые моменты, длительности и относительные задержки задаются в рамках общей координатной системы времени. Такой подход позволяет выстраивать сложные последовательности без ручного управления таймерами.
Ключевые характеристики временной шкалы:
Каждая анимация рассматривается как отдельный сегмент, который размещается на временной шкале. Сегменты могут перекрываться, следовать друг за другом или запускаться параллельно.
Композиция строится через:
В рамках Motion One анимации могут быть описаны как независимые сущности, но при объединении в последовательность они начинают подчиняться общей временной логике.
Последовательность анимаций формируется через группировку нескольких вызовов анимации в логически связанную структуру. Каждая следующая анимация получает своё положение относительно предыдущих.
Типовая структура последовательности:
Основной эффект последовательностей заключается в том, что управление временем становится декларативным: вместо ручного расчёта задержек используется описание порядка.
Временная шкала оперирует двумя типами позиционирования:
Абсолютное позиционирование
Относительное позиционирование
Комбинация этих подходов обеспечивает гибкость при построении сложных анимационных сценариев.
Временная шкала поддерживает параллельное выполнение анимаций, где несколько процессов начинаются и заканчиваются в разных точках, но остаются частью одной системы времени.
Параллельность достигается через:
Такая модель позволяет создавать сложные визуальные сцены, где элементы движутся независимо, но остаются синхронизированными относительно общей структуры.
Задержка перестаёт быть просто паузой перед стартом анимации и становится инструментом построения временной архитектуры.
Задержки применяются для:
В рамках временной шкалы задержка интерпретируется как смещение относительно текущей позиции в последовательности, а не как изолированный таймер.
Длительность каждого сегмента определяет его протяжённость на временной оси. При изменении длительности изменяется не только сам сегмент, но и общая структура композиции.
Основные свойства длительности:
Изменение длительности одного элемента может перераспределять всю временную структуру при относительных позиционированиях.
При наложении нескольких анимаций на один и тот же временной участок возникает интерференция эффектов. Каждый ключевой кадр применяется в соответствии с собственным диапазоном времени.
Типы взаимодействия:
Такой подход позволяет формировать сложные переходы без необходимости ручного управления состояниями.
Временная шкала поддерживает объединение анимаций в блоки, которые рассматриваются как единые сущности.
Логические блоки используются для:
Каждый блок имеет собственную локальную временную ось, которая затем маппируется на глобальную шкалу.
Ключевые кадры определяют состояние анимации в конкретные моменты времени. На временной шкале они распределяются вдоль интервала и интерполируются между собой.
Особенности работы ключевых кадров:
При наложении нескольких анимаций ключевые кадры каждого сегмента сохраняют автономность, но подчиняются общей временной структуре.
Масштабирование изменяет соотношение между реальным временем и визуальной длительностью анимации. При увеличении масштаба вся композиция растягивается, при уменьшении — сжимается.
Эффекты масштабирования:
Масштабирование используется для адаптации одной и той же анимационной структуры под разные контексты воспроизведения.
Скорость влияет на то, как временная шкала интерпретирует проход времени. Увеличение скорости приводит к ускорению всей композиции, уменьшение — к замедлению.
При изменении скорости сохраняются:
Изменение скорости не требует перерасчёта самой шкалы, так как она остаётся независимой от физического времени.
Временная шкала может быть связана с внешними триггерами, которые влияют на её позицию или состояние. Это позволяет связывать анимации с пользовательскими действиями или системными событиями.
Основные модели синхронизации:
Такое поведение превращает временную шкалу в управляемую систему состояния, а не статический набор анимаций.
Сложные сценарии формируются через вложенные временные шкалы, где каждая подшкала управляет своей частью анимаций.
Иерархия обеспечивает:
При этом изменения в родительской шкале могут распространяться на дочерние, сохраняя общую согласованность всей системы времени.