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

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

Ключевая идея:

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

Базовая структура временной шкалы

Временная шкала строится вокруг последовательности шагов, каждый из которых описывает анимационное действие:

  • начало (offset)
  • длительность (duration)
  • тип анимации (tween, spring и т.д.)
  • параметры изменения значения

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

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

Popmotion предоставляет механизм timeline, который позволяет объединять анимации в единый поток.

import { timeline, tween, easing } from 'popmotion';

timeline([
  tween({
    from: 0,
    to: 100,
    duration: 500,
    ease: easing.easeInOut
  }),

  tween({
    from: 100,
    to: 200,
    duration: 300,
    ease: easing.linear
  })
]).start();

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

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

Временная шкала не ограничивается последовательностью. Несколько анимаций могут начинаться одновременно.

timeline([
  {
    track: 'x',
    from: 0,
    to: 300,
    duration: 800
  },
  {
    track: 'opacity',
    from: 0,
    to: 1,
    duration: 300
  }
]).start();

Здесь разные свойства анимируются параллельно, но управляются одним временем.

Использование задержек и смещений

Один из ключевых механизмов временных шкал — управление стартовыми позициями анимаций.

timeline([
  {
    track: 'x',
    from: 0,
    to: 200,
    duration: 400
  },

  {
    track: 'y',
    from: 0,
    to: 100,
    duration: 400,
    offset: 200
  }
]).start();

offset задаёт момент начала относительно общей шкалы.

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

Именованные сегменты временной шкалы

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

timeline([
  { label: 'start' },

  {
    track: 'scale',
    from: 0.5,
    to: 1,
    duration: 300,
    offset: 'start'
  },

  {
    track: 'opacity',
    from: 0,
    to: 1,
    duration: 300,
    offset: 'start'
  }
]).start();

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

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

Относительное позиционирование

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

timeline([
  {
    track: 'x',
    from: 0,
    to: 100,
    duration: 300
  },

  {
    track: 'x',
    from: 100,
    to: 200,
    duration: 300,
    offset: '-=100'
  }
]).start();

Здесь вторая анимация стартует до завершения первой, создавая эффект перекрытия.

Основные типы относительных смещений:

  • += — позже относительно точки
  • -= — раньше относительно точки

Сложные композиции временных шкал

При увеличении количества элементов временная шкала становится инструментом композиции интерфейсной динамики.

timeline([
  {
    label: 'intro'
  },

  {
    track: 'opacity',
    from: 0,
    to: 1,
    duration: 200,
    offset: 'intro'
  },

  {
    track: 'y',
    from: 50,
    to: 0,
    duration: 400,
    offset: 'intro'
  },

  {
    track: 'scale',
    from: 0.8,
    to: 1,
    duration: 400,
    offset: 'intro+=100'
  },

  {
    track: 'color',
    from: '#999',
    to: '#000',
    duration: 300,
    offset: 'intro+=150'
  }
]).start();

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

Управление вложенными временными шкалами

Временные шкалы могут быть вложенными, формируя иерархию анимаций.

const intro = timeline([
  {
    track: 'opacity',
    from: 0,
    to: 1,
    duration: 300
  }
]);

const move = timeline([
  {
    track: 'x',
    from: 0,
    to: 200,
    duration: 500
  }
]);

timeline([
  {
    sequence: intro
  },

  {
    sequence: move,
    offset: 200
  }
]).start();

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

Синхронизация нескольких свойств

Временная шкала особенно эффективна при управлении несколькими параметрами одного объекта.

timeline([
  {
    track: 'x',
    from: 0,
    to: 300,
    duration: 600
  },
  {
    track: 'y',
    from: 0,
    to: 150,
    duration: 600
  },
  {
    track: 'rotate',
    from: 0,
    to: 180,
    duration: 600
  }
]).start();

Все свойства синхронизируются по единому времени, создавая целостное движение.

Управление временной плотностью

Временная шкала позволяет управлять тем, насколько «плотно» расположены анимации во времени.

Плотная шкала:

  • короткие интервалы между событиями
  • высокая динамика
  • ощущение ускоренного движения

Разреженная шкала:

  • большие паузы
  • акцент на отдельных этапах
  • выразительная пауза между действиями
timeline([
  {
    track: 'x',
    from: 0,
    to: 100,
    duration: 100
  },
  {
    track: 'x',
    from: 100,
    to: 200,
    duration: 600,
    offset: 400
  }
]).start();

Принципы построения сложных временных шкал

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

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

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

Оглавление