Объекты со смещениями

В анимационной модели Motion One ключевые кадры могут задаваться не только как простые массивы значений, но и как объекты, содержащие дополнительные метаданные, включая явные смещения. Смещение (offset) определяет положение ключевого кадра внутри временной шкалы анимации в диапазоне от 0 до 1, где 0 соответствует началу, а 1 — завершению.

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

Принцип работы смещений в ключевых кадрах

Каждый ключевой кадр может быть представлен как объект:

{
  transform: "translateX(0px)",
  opacity: 0,
  offset: 0
}

Свойство offset задаёт долю времени, в которой применяется данный кадр.

  • 0 — начало анимации
  • 1 — конец анимации
  • промежуточные значения (например 0.25, 0.6) — контрольные точки

Если offset не указан, браузер или Motion One автоматически распределяет ключевые кадры равномерно.

Явное управление временной шкалой

Равномерное распределение не всегда соответствует требованиям сложной анимации. Использование объектов с offset позволяет задать нелинейную динамику.

Пример:

import { animate } from "motion";

animate(
  ".box",
  {
    transform: [
      { transform: "translateX(0px)", offset: 0 },
      { transform: "translateX(200px)", offset: 0.2 },
      { transform: "translateX(220px)", offset: 0.8 },
      { transform: "translateX(0px)", offset: 1 }
    ]
  },
  {
    duration: 2000
  }
);

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

Смысл нелинейных распределений

Использование offset позволяет:

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

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

Комбинация offset и easing

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

  1. offset — определяет границы сегментов времени
  2. easing — управляет поведением внутри сегмента

Пример:

animate(
  ".circle",
  {
    x: [
      { x: 0, offset: 0 },
      { x: 300, offset: 0.5 },
      { x: 150, offset: 1 }
    ]
  },
  {
    duration: 1500,
    easing: "ease-in-out"
  }
);

Здесь движение сначала ускоряется к середине, затем возвращается обратно, но уже под действием глобального easing.

Неравномерные ключевые кадры как инструмент дизайна

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

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

Использование отрицательных эффектов равномерного распределения

Без явных offset массив ключевых кадров интерпретируется как:

[ A, B, C ]

что эквивалентно:

A → 0
B → 0.5
C → 1

Такое поведение упрощает разработку, но ограничивает контроль. Добавление offset ломает эту симметрию и переводит управление в ручной режим.

Объекты с несколькими свойствами и единым offset

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

animate(
  ".card",
  {
    x: [
      { x: 0, opacity: 0.2, offset: 0 },
      { x: 150, opacity: 1, offset: 0.4 },
      { x: 300, opacity: 0.8, offset: 1 }
    ]
  },
  {
    duration: 1200
  }
);

В этом случае все свойства внутри одного объекта синхронизированы по времени через единый offset, что обеспечивает согласованное поведение визуального элемента.

Конфликты автоматического распределения и ручных offset

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

Типичное поведение:

  • кадры с offset фиксируются
  • остальные распределяются между ними пропорционально
  • итоговая шкала пересчитывается в диапазоне 0–1

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

Ступенчатые переходы через плотное размещение offset

При необходимости можно создавать почти дискретные переходы:

animate(
  ".indicator",
  {
    backgroundColor: [
      { backgroundColor: "red", offset: 0 },
      { backgroundColor: "yellow", offset: 0.45 },
      { backgroundColor: "green", offset: 0.5 },
      { backgroundColor: "blue", offset: 1 }
    ]
  },
  {
    duration: 1000
  }
);

Плотное расположение offset (например 0.45 и 0.5) формирует резкий визуальный скачок между состояниями.

Связь offset с временной моделью Web Animations API

Motion One опирается на модель Web Animations API, где ключевые кадры описываются как список объектов с временными метками. Свойство offset напрямую отражает внутреннюю нормализованную временную координату кадра.

Это означает:

  • значения всегда приводятся к диапазону 0–1
  • порядок кадров должен соответствовать возрастанию offset
  • дублирование offset приводит к наложению состояний

Практика построения сложных траекторий

При создании сложных движений, например диагональных траекторий с изменением прозрачности и масштаба, объектная форма с offset позволяет задать точные контрольные точки:

animate(
  ".dot",
  {
    x: [
      { x: 0, scale: 1, offset: 0 },
      { x: 100, scale: 1.2, offset: 0.3 },
      { x: 220, scale: 0.9, offset: 0.7 },
      { x: 300, scale: 1, offset: 1 }
    ],
    y: [
      { y: 0, offset: 0 },
      { y: 150, offset: 0.5 },
      { y: 0, offset: 1 }
    ]
  },
  {
    duration: 1800
  }
);

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

Ограничения модели offset

Несмотря на гибкость, использование явных смещений требует соблюдения структуры:

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

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

Оглавление