Метки времени

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

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

Чаще всего используется нормализованный диапазон:

  • 0 — начало анимации
  • 1 — завершение анимации

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

Процентные ключевые точки

В Motion One ключевые состояния анимации часто задаются через процентные позиции. Каждая точка определяет, в какой момент времени должно быть достигнуто определённое значение свойства.

Типовая модель:

  • 0% — начальное состояние
  • 50% — промежуточное состояние
  • 100% — финальное состояние

При этом распределение не обязано быть равномерным. Смещение ключевых точек позволяет формировать нелинейное поведение:

  • ускоренное появление в начале с плавным завершением
  • задержанное начало с резким переходом к финалу
  • многократные изменения состояния внутри одного интервала

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

Смещения внутри ключевых кадров

Каждый ключевой кадр может иметь собственную временную позицию, выраженную числом от 0 до 1 или процентом. Эти значения определяют не только порядок, но и плотность изменений.

Неравномерное распределение меток позволяет управлять динамикой:

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

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

Длительность как масштаб временной сетки

В Motion One длительность анимации выступает как коэффициент масштабирования всей временной структуры. Изменение длительности не требует переразметки ключевых точек, поскольку они остаются в относительных координатах.

Если ключевые состояния заданы как:

  • 0
  • 0.5
  • 1

то при увеличении длительности с 300 мс до 1200 мс структура сохраняется, меняется только абсолютное время прохождения интервала.

Такой подход позволяет строить анимации, независимые от контекста использования, сохраняя предсказуемость поведения.

Метки в последовательностях

При построении сложных сцен анимация редко ограничивается одним объектом. Несколько элементов синхронизируются через последовательности, где каждая операция имеет собственную временную привязку.

В таких структурах используются метки старта относительно других анимаций:

  • начало сразу после завершения предыдущей
  • начало с фиксированным смещением
  • перекрытие интервалов выполнения

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

Локальные привязки времени

При группировке анимаций внутри одной последовательности временная ось становится локальной. Каждая операция получает смещение относительно начала контейнера.

Внутри такой модели применяются следующие принципы:

  • старт относительно начала группы
  • старт относительно окончания предыдущего шага
  • наложение временных интервалов

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

Перекрытие временных интервалов

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

При перекрытии:

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

Такое поведение создаёт сложные композиции без необходимости объединять все изменения в один набор ключевых кадров.

Контекстные временные смещения

Вместо абсолютных значений часто используются относительные указания:

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

Эти смещения формируют граф зависимостей, где каждый элемент связан с другими через временные метки.

Иерархия временных меток

При построении сложных интерфейсных анимаций временные метки формируют иерархическую структуру:

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

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

Синхронизация состояний через общие точки

Если несколько анимаций используют одинаковые временные позиции, они автоматически синхронизируются по ключевым состояниям. Например, переход к видимому состоянию нескольких элементов может происходить одновременно даже при разной длительности отдельных эффектов.

Синхронизация достигается за счёт совпадения:

  • стартовых меток
  • промежуточных точек
  • финальных значений

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

Временные метки и динамические изменения

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

Такая модель особенно эффективна при:

  • адаптации интерфейса под разные устройства
  • изменении скорости воспроизведения
  • реактивных сценариях, зависящих от состояния приложения

Разбиение анимации на временные сегменты

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

Типовая структура сегментов:

  • вступление с быстрым набором состояния
  • основная фаза стабильного движения
  • завершение с затуханием

Каждый сегмент содержит собственные внутренние ключевые точки, формируя вложенную временную систему.

Композиция независимых временных шкал

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

В результате:

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

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