Относительные значения в анимациях Motion One позволяют задавать изменения не от фиксированной точки, а от текущего состояния свойства. Это особенно важно при интерактивных интерфейсах, где конечное значение заранее неизвестно или зависит от предыдущих анимаций, пользовательских действий и текущего DOM-состояния.
В основе лежит принцип инкрементального изменения: вместо «установить значение X» задаётся «изменить значение на ΔX». Такой подход используется для координат, поворотов, масштабирования и других числовых свойств.
Относительное значение интерпретируется как смещение от текущего вычисленного состояния элемента в момент старта анимации. В отличие от абсолютных значений, где задаётся конечная точка, относительные оперируют дельтой.
Типовые формы записи:
"+=100" — увеличить текущее значение на 100"-=50" — уменьшить текущее значение на 50"+=10deg" — добавить 10 градусов к текущему
повороту"-=20%" — уменьшить текущее значение на 20
процентовВ Motion One такие строки используются в свойствах анимации, которые поддерживают числовые и трансформируемые значения.
Наиболее частая область применения — трансформации. Motion One
предоставляет высокоуровневые свойства, такие как x,
y, rotate, scale,
scaleX, scaleY.
import { animate } from "motion";
animate(".box", {
x: "+=200",
y: "-=50",
rotate: "+=45"
});В этом примере движение выполняется относительно текущего положения элемента:
Такой подход особенно полезен при последовательных анимациях, где отсутствует необходимость хранить состояние вручную.
Относительные значения позволяют строить цепочки изменений, где каждая последующая анимация опирается на результат предыдущей.
animate(".box", { x: "+=100" });
animate(".box", { x: "+=100" });
animate(".box", { x: "+=100" });В результате элемент последовательно смещается вправо, суммарно на 300px, несмотря на отсутствие явного указания конечного положения.
Подобное поведение отличается от абсолютных значений, где повторная анимация перезаписывает итоговое состояние.
В ключевых кадрах относительные значения позволяют формировать динамические траектории, зависящие от стартового состояния элемента.
animate(".box", {
x: ["0", "+=150", "-=50", "+=100"],
rotate: ["0deg", "+=90deg", "+=45deg"]
});Здесь каждый следующий кадр вычисляется относительно стартовой позиции, а не относительно результата предыдущего кадра внутри массива. Это создаёт предсказуемую зависимость от начального состояния при каждом запуске анимации.
При использовании относительных значений Motion One считывает computed style элемента перед запуском анимации. Это означает, что стартовая точка может изменяться в зависимости от:
element.style.transform = "translateX(80px)";
animate(element, {
x: "+=40"
});В этом случае итоговое смещение будет вычислено от 80px, а не от нуля.
Относительные значения поддерживают не только пиксели, но и проценты, градусы и другие единицы измерения.
animate(".box", {
scale: "+=0.2",
scaleX: "-=0.1"
});Для процентных значений поведение зависит от контекста свойства.
Например, width или height могут
интерпретировать проценты относительно родительского контейнера.
animate(".panel", {
width: "+=10%"
});Здесь увеличение выполняется относительно текущей вычисленной ширины, а не от начальной точки анимации.
Относительные и абсолютные значения могут использоваться совместно внутри одного анимационного объекта. В таком случае Motion One обрабатывает каждое свойство независимо.
animate(".box", {
x: "+=100",
opacity: 0,
rotate: 180
});x изменяется относительно текущего положенияopacity устанавливается в фиксированное значениеrotate переходит в абсолютное состояниеТакая комбинация позволяет одновременно выполнять переход состояния и накопительные смещения.
При работе с интерактивными сценариями относительные значения часто используются для реакций на пользовательский ввод.
element.addEventListener("click", () => {
animate(element, {
scale: "+=0.1",
rotate: "+=15"
});
});Каждое событие добавляет инкремент к текущему состоянию, создавая эффект накопления взаимодействий без необходимости хранения внешнего состояния.
При повторном вызове анимации относительное значение всегда пересчитывается от текущего состояния на момент старта нового анимационного цикла. Это приводит к тому, что одинаковый код может давать разные конечные значения при разных исходных условиях.
animate(".box", { x: "+=50" });
animate(".box", { x: "+=50" });Если в момент второго вызова элемент уже был смещён, итоговое значение будет суммой предыдущего состояния и нового инкремента.
При использовании относительных значений важно учитывать согласованность единиц измерения. Некорректное смешение может привести к игнорированию анимации или к непредсказуемому поведению.
Недопустимые комбинации:
"+=100px" при уже процентном контексте без явного
приведенияdeg и rad в одном свойствеMotion One выполняет интерполяцию только там, где возможно однозначное числовое преобразование.
В композиции анимаций относительные значения сохраняют свою семантику независимо от задержек. В момент старта каждого ключа вычисляется актуальное значение.
animate(".box", { x: "+=100" }, { delay: 0.5 });
animate(".box", { y: "+=50" }, { delay: 1 });Каждая анимация берёт своё стартовое состояние независимо от предыдущей, если они не объединены в общий таймлайн.
Относительные значения позволяют строить траектории без предварительного расчёта координат. Это особенно полезно при адаптивных интерфейсах.
animate(".dot", {
x: "+=30",
y: "+=30",
duration: 0.4
});
animate(".dot", {
x: "+=30",
y: "-=30",
duration: 0.4
});Последовательные смещения формируют диагональные или ломаные траектории, зависящие от текущего положения элемента.
При изменении layout или перерасчёте стилей относительные значения продолжают работать от актуального состояния, так как Motion One каждый раз использует вычисленные значения перед стартом анимации.
Это делает модель устойчивой к:
Относительные значения становятся связующим механизмом между состоянием интерфейса и анимационной логикой, исключая необходимость ручной синхронизации координат и свойств.