В Motion One массив значений является базовой формой описания ключевых кадров анимации. Любое свойство, поддерживающее интерполяцию, может быть задано не одним значением, а последовательностью состояний, между которыми движок построит плавный переход.
Внутри Web Animations API, на котором основана библиотека, массив интерпретируется как набор keyframes, где каждый элемент массива соответствует состоянию свойства в определённый момент времени.
Наиболее прямолинейное применение массивов — последовательная анимация числовых значений.
import { animate } from "motion"
animate(".box", {
x: [0, 100, 50, 200],
opacity: [1, 0.5, 1]
})Каждое значение массива интерпретируется как ключевая точка
траектории. Для x задаётся четыре состояния, для
opacity — три. При этом Motion One автоматически
синхронизирует длину анимации, распределяя ключевые кадры по времени
равномерно.
Если длины массивов различаются, недостающие промежуточные шаги компенсируются интерполяцией между ближайшими значениями.
Числовые массивы используются для свойств:
x, y, scale,
rotate)blur, brightness)animate(".card", {
scale: [1, 1.2, 0.9, 1],
rotate: [0, 10, -10, 0]
})Каждый промежуточный шаг вычисляется линейно или с учётом заданной функции easing.
Помимо чисел поддерживаются строковые значения, если браузер способен интерполировать соответствующий тип CSS.
animate(".title", {
color: ["#ff0000", "#00ff00", "#0000ff"]
})Цвета интерполируются в RGB/rgba пространство, обеспечивая плавный переход между состояниями.
animate(".logo", {
transform: [
"translateX(0px) scale(1)",
"translateX(100px) scale(1.2)",
"translateX(50px) scale(0.8)"
]
})В данном случае строка рассматривается как единое значение transform, но Motion One пытается интерполировать совместимые составляющие.
Массив значений может быть заменён массивом объектов, где каждое состояние описывается отдельно. Это расширяет контроль над таймингом и поведением отдельных шагов.
animate(".dot", {
x: [
{ value: 0, offset: 0 },
{ value: 100, offset: 0.3 },
{ value: 50, offset: 1 }
]
})offset задаёт нормализованную позицию ключевого кадра в
диапазоне от 0 до 1, позволяя управлять распределением времени.
При различной длине массивов Motion One нормализует временную шкалу:
animate(".line", {
x: [0, 100, 200],
opacity: [1, 0]
})В этом случае:
x получает три ключевых состоянияopacity — два состоянияИнтерполяция промежуточных значений выравнивается автоматически.
Для каждого ключевого кадра может быть задана собственная функция сглаживания.
animate(".block", {
x: [
{ value: 0, easing: "ease-in" },
{ value: 200, easing: "ease-out" },
{ value: 100, easing: "linear" }
]
})Такой подход позволяет строить сложные нелинейные траектории движения без необходимости ручного расчёта временных сегментов.
При работе с цветовыми массивами используется интерполяция в пространстве RGBA. Это позволяет избегать резких скачков оттенков.
animate(".background", {
backgroundColor: ["#111111", "#ffcc00", "#ffffff"]
})При переходе между цветами промежуточные состояния вычисляются поканально, что обеспечивает визуально непрерывный градиент во времени.
Массивы значений часто используются для синхронной анимации нескольких свойств.
animate(".panel", {
x: [0, 300, 150],
y: [0, 50, 0],
opacity: [0, 1, 1],
scale: [0.8, 1.1, 1]
})Все свойства используют общий таймлайн, но каждое сохраняет собственную траекторию значений.
Массивы значений описывают изменение одного элемента во времени. Stagger применяется к множеству элементов.
animate(".item", {
x: [0, 100, 0]
}, {
delay: stagger(0.1)
})В этом случае каждый элемент получает одинаковую кривую изменения, но с временным смещением.
При необходимости нелинейного движения используется явное управление ключевыми точками.
animate(".orb", {
x: [
{ value: 0, offset: 0 },
{ value: 300, offset: 0.2 },
{ value: 150, offset: 0.6 },
{ value: 400, offset: 1 }
]
})Такое распределение создаёт ускорения и замедления без явного задания easing.
Transform-свойства часто комбинируются в единую структуру ключевых кадров.
animate(".shape", {
transform: [
"translateX(0px) rotate(0deg)",
"translateX(200px) rotate(90deg)",
"translateX(100px) rotate(45deg)"
]
})Каждый элемент массива представляет собой состояние всей трансформационной матрицы, а не отдельных компонентов.
При конфликте длины массивов Motion One использует следующие принципы:
animate(".sync", {
x: [0, 100, 200, 300],
opacity: [1, 0]
})Opacity в данном случае будет интерполирован через промежуточные состояния, соответствующие четырём фазам движения.
При последовательных анимациях массивы значений часто комбинируются с timeline.
import { timeline } from "motion"
timeline([
[".a", { x: [0, 100] }],
[".b", { scale: [0, 1, 0.5] }],
[".c", { rotate: [0, 180, 360] }]
])Каждый элемент timeline использует собственный массив ключевых кадров, формируя независимые траектории внутри общей последовательности.
Некоторые CSS-свойства не поддерживают плавную интерполяцию. В таких случаях массив значений применяется дискретно:
animate(".icon", {
display: ["none", "block", "none"]
})Переход происходит по принципу переключения состояний без промежуточных значений.
Использование массивов в Motion One формирует декларативную модель анимации, где движение задаётся как последовательность состояний, а не как набор императивных шагов. Каждый массив определяет форму изменения свойства во времени, а движок отвечает за интерполяцию, синхронизацию и сглаживание переходов между этими состояниями.