В анимационных системах ключевые кадры представляют собой дискретные состояния свойства объекта во времени, между которыми система автоматически вычисляет промежуточные значения. В контексте Motion One эта концепция реализована максимально приближенно к веб-стандартам, опираясь на нативный Web Animations API и расширяя его удобным декларативным слоем.
Ключевой кадр задаёт фиксированное значение свойства в определённый момент времени, а переход между кадрами формирует плавную интерполяцию. Такая модель избавляет от необходимости вручную описывать каждый шаг изменения значения и позволяет мыслить анимацию как последовательность состояний.
В Motion One ключевые кадры задаются через массив значений, соответствующих одному или нескольким CSS-свойствам. Каждый элемент массива представляет состояние на определённой фазе анимации.
import { animate } from "motion";
animate(
".box",
{
x: [0, 200, 50],
opacity: [1, 0.5, 1]
},
{
duration: 2
}
);В данном случае:
Motion One автоматически распределяет временные интервалы между ключевыми кадрами, если явно не задано иное.
Механизм ключевых кадров опирается на интерполяцию — процесс вычисления промежуточных значений между заданными точками.
Для числовых значений используется линейная или ускоренная интерполяция, в зависимости от параметров easing. Для цветовых значений применяется интерполяция в пространстве RGBA или HSLA. Для трансформаций — разложение на компоненты (translate, scale, rotate) с последующим смешиванием.
animate(
".box",
{
backgroundColor: ["#ff0000", "#00ff00", "#0000ff"]
},
{
duration: 3,
easing: "ease-in-out"
}
);Здесь цвет проходит через промежуточные состояния, создавая непрерывный переход между тремя точками цветового пространства.
Если ключевые кадры заданы массивом без дополнительных временных меток, Motion One равномерно распределяет их по длительности анимации.
При необходимости можно использовать расширенный синтаксис с объектами, где каждая точка содержит дополнительную информацию о времени.
animate(
".box",
{
x: [
{ value: 0, offset: 0 },
{ value: 300, offset: 0.7 },
{ value: 100, offset: 1 }
]
},
{
duration: 2
}
);Поле offset определяет относительную позицию ключевого кадра в диапазоне от 0 до 1. Это позволяет управлять плотностью изменений и создавать неравномерные анимации.
Motion One поддерживает синхронное управление несколькими CSS-свойствами через общую шкалу ключевых кадров. Все свойства внутри одного объекта синхронизируются по времени.
animate(
".box",
{
x: [0, 200, 0],
scale: [1, 1.5, 1],
rotate: [0, 180, 360]
},
{
duration: 2
}
);Такой подход формирует единый временной поток, где каждый кадр описывает состояние объекта целиком, а не отдельных свойств по отдельности.
Ключевые кадры в Motion One обладают детерминированной природой: одинаковый набор входных значений всегда приводит к одинаковому результату интерполяции. Это важно для предсказуемости анимаций в сложных интерфейсах, где несколько анимационных потоков взаимодействуют между собой.
При повторном запуске анимации сохраняется структура ключевых кадров, а начальные условия переопределяют только стартовые значения.
Easing влияет не на сами ключевые кадры, а на распределение времени между ними. В результате изменяется характер движения между фиксированными точками.
animate(
".box",
{
x: [0, 300, 0]
},
{
duration: 2,
easing: "ease-in-out"
}
);При линейном easing движение равномерно распределяется между кадрами. При нелинейном — скорость изменения смещается, создавая эффект ускорения или замедления без изменения самих ключевых точек.
Если для некоторых свойств задано меньше ключевых кадров, чем для других, Motion One использует последний известный кадр как стабильное состояние до конца анимации.
animate(
".box",
{
x: [0, 200],
opacity: [1, 0.5, 0.2, 1]
},
{
duration: 3
}
);В этом случае значение x останется на последнем указанном уровне после завершения массива, а opacity продолжит изменяться по всей шкале.
Ключевые кадры поддерживают широкий спектр типов данных:
animate(
".box",
{
filter: ["blur(0px)", "blur(10px)", "blur(0px)"],
x: ["0px", "100px", "0px"]
},
{
duration: 2
}
);Каждый тип данных интерполируется по собственной внутренней модели, что обеспечивает корректность переходов без ручного разложения значений.
Ключевые кадры позволяют формировать нелинейные траектории движения, комбинируя несколько контрольных точек. Это создаёт возможность построения сложных визуальных сценариев без императивного управления каждым шагом.
animate(
".box",
{
x: [0, 150, 300, 200, 0],
y: [0, 100, 0, -100, 0]
},
{
duration: 4
}
);Такая структура формирует петлеобразное движение с возвратом в исходную точку через серию промежуточных состояний.
Ключевые кадры могут использоваться в связке с интерактивными событиями, где стартовые значения задаются динамически, а конечные состояния фиксированы структурой массива.
Motion One пересчитывает интерполяцию на основе текущего состояния элемента в момент запуска, сохраняя относительную структуру ключевых кадров.
В отличие от классических таймлайнов, Motion One допускает изменение анимационных параметров во время выполнения. При новом запуске анимации старая интерполяция заменяется новой, при этом ключевые кадры пересчитываются относительно текущего состояния элемента.
Это создаёт эффект плавной перезаписи движения без резких скачков между состояниями.
Если передаётся только одно значение, система рассматривает его как фиксированное состояние без интерполяции.
animate(
".box",
{
x: [200]
}
);В этом случае элемент мгновенно принимает указанное состояние или остаётся статичным в зависимости от параметров запуска.
Ключевые кадры являются центральной абстракцией, вокруг которой строится модель анимации. Они объединяют декларативный подход, нативную производительность Web Animations API и удобный синтаксис описания состояний.
Через ключевые кадры достигается разделение логики описания анимации и её исполнения, что позволяет концентрироваться на структуре движения, а не на его пошаговой реализации.