Визуализация timeline

Модель временной шкалы и принцип композиции анимаций

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

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

Внутренняя модель опирается на композицию эффектов:

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

Timeline в Motion One реализует декларативный подход, при котором временные метки становятся основным способом описания поведения сцены.

Создание базовой временной шкалы

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

import { timeline } from "motion";

timeline([
  ["#box", { x: 100, opacity: 1 }, { duration: 0.4 }],
  ["#box", { y: 50 }, { at: 0.2 }],
  ["#box", { scale: 1.2 }, { at: 0.4 }]
]);

В данном примере временная шкала разбивается на несколько перекрывающихся фаз. Параметр at определяет смещение относительно начала timeline или относительно предыдущего шага.

Структура каждого элемента:

  • селектор или элемент DOM
  • объект свойств анимации
  • опции тайминга

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

Абсолютные и относительные временные позиции

Система позиционирования внутри timeline поддерживает несколько моделей расчёта времени:

  • относительное смещение от начала шкалы
  • смещение от предыдущей анимации
  • использование меток (labels)

Пример относительных смещений:

timeline([
  ["#a", { opacity: 1 }, { duration: 0.3 }],
  ["#b", { opacity: 1 }, { at: "-0.1" }],
  ["#c", { opacity: 1 }, { at: "+0.2" }]
]);

Здесь отрицательное смещение приводит к перекрытию анимаций, а положительное — к созданию паузы между этапами.

Синхронизация групп элементов

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

timeline([
  [".item", { y: 50, opacity: 1 }, { delay: stagger(0.1) }],
  [".item", { scale: 1.1 }, { at: 0.5 }]
]);

Функция stagger распределяет стартовые моменты анимации по элементам коллекции, создавая эффект каскадного появления.

Механизм стаггера работает как преобразователь списка элементов в набор временных смещений:

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

Ключевые кадры внутри timeline

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

timeline([
  [
    "#box",
    {
      x: [0, 100, 50],
      rotate: [0, 180, 90]
    },
    { duration: 1 }
  ]
]);

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

Особенности:

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

Управление фазами через метки

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

timeline([
  ["#title", { opacity: 1 }, { duration: 0.3, at: "start" }],
  ["#subtitle", { opacity: 1 }, { at: "start += 0.2" }],
  ["#content", { opacity: 1 }, { at: "start += 0.5" }]
]);

Метки позволяют:

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

Механизм меток становится особенно важным при создании интерфейсов с множественными состояниями.

Параллельное выполнение анимаций

Timeline поддерживает одновременное выполнение нескольких анимаций на разных элементах или свойствах.

timeline([
  ["#left", { x: 100 }, { duration: 0.6 }],
  ["#right", { x: -100 }, { duration: 0.6, at: 0 }]
]);

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

Контроль воспроизведения

Созданная временная шкала возвращает объект управления, который предоставляет доступ к состояниям анимации:

  • play
  • pause
  • reverse
  • speed
  • seek
const controls = timeline([
  ["#box", { x: 200 }, { duration: 1 }]
]);

controls.pause();
controls.play();
controls.reverse();
controls.speed = 2;

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

Интеграция с интерактивными сценариями

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

const controls = timeline([
  ["#panel", { opacity: 1, y: 0 }, { duration: 0.4 }]
]);

document.querySelector("#btn").addEventListener("click", () => {
  controls.play();
});

Подобная интеграция позволяет использовать timeline как основу для:

  • раскрывающихся панелей
  • модальных окон
  • последовательных onboarding-сцен

Наложение нескольких timeline

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

const header = timeline([
  ["header", { y: 0 }, { duration: 0.5 }]
]);

const content = timeline([
  [".card", { opacity: 1 }, { delay: stagger(0.1) }]
]);

Независимость timeline позволяет:

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

Оркестрация сложных сцен

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

timeline([
  ["#bg", { opacity: 1 }, { duration: 1 }],
  ["#hero", { y: 0, opacity: 1 }, { at: 0.2 }],
  ["#cta", { scale: 1 }, { at: 0.6 }],
  [".features", { opacity: 1 }, { at: 0.8 }]
]);

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

Повторное использование временных сценариев

Timeline может рассматриваться как переиспользуемая функция анимационного поведения. Один и тот же сценарий применяется к разным компонентам без изменения логики.

const fadeInSequence = (selector) =>
  timeline([
    [selector, { opacity: 1, y: 0 }, { duration: 0.4 }],
    [selector, { scale: 1.05 }, { at: 0.3 }]
  ]);

fadeInSequence("#card1");
fadeInSequence("#card2");

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

Оптимизация исполнения timeline

Производительность временных шкал зависит от количества одновременно активных анимаций и сложности вычисления интерполяций.

Ключевые аспекты оптимизации:

  • минимизация количества одновременных свойств
  • использование transform вместо layout-свойств
  • группировка элементов в единые анимационные блоки
  • избегание избыточных перекрытий интервалов

Timeline в Motion One использует requestAnimationFrame, что обеспечивает синхронизацию с циклом рендеринга браузера и снижает вероятность дрожания кадров.

Сценарии построения интерфейсных переходов

Timeline часто применяется для описания переходов между состояниями интерфейса:

  • открытие модальных окон
  • переключение вкладок
  • анимация маршрутов страниц
  • последовательное появление контента
timeline([
  ["#modal", { opacity: 1 }, { duration: 0.2 }],
  ["#modal-content", { scale: 1, opacity: 1 }, { at: 0.1 }],
  ["#overlay", { opacity: 0.5 }, { at: 0 }]
]);

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

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

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

Структура может быть иерархической:

  • глобальная timeline сцены

    • timeline заголовка
    • timeline контента
    • timeline интерактивных элементов

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

Оглавление