Физическая модель пружины используется для создания инерционных, естественных переходов, где движение не подчиняется линейной интерполяции, а описывается системой дифференциальных уравнений. В контексте Motion One это реализуется через spring easing, который заменяет стандартные кривые Безье и тайминг-функции.
Пружинная анимация характеризуется стремлением системы к равновесию с возможными колебаниями, затухающими со временем. Это позволяет моделировать поведение интерфейса, приближенное к физике реального мира: отклонение, возврат, переразгон, затухание.
В Motion One поведение пружины задаётся набором параметров, определяющих динамику системы:
Эти параметры определяют форму траектории движения и характер переходного процесса.
Жёсткость определяет силу, с которой система стремится вернуться к целевому значению.
Высокие значения:
Низкие значения:
Математически жёсткость влияет на коэффициент восстановления силы, увеличивая ускорение при отклонении от равновесия.
Демпфирование определяет скорость потери энергии системой. Это ключевой параметр, формирующий характер колебаний.
Поведение системы:
Высокое демпфирование подавляет колебания, делая движение строгим и предсказуемым. Низкое — создаёт эффект «пружинящего» интерфейса.
Масса влияет на инерционные свойства анимации. Чем выше масса, тем сложнее системе изменить скорость движения.
Эффекты увеличения массы:
Низкая масса:
Масса в пружинной модели не влияет напрямую на конечное положение, но изменяет временную динамику перехода.
Начальная скорость задаёт состояние системы в момент старта анимации. Она особенно важна при анимации жестов и взаимодействий пользователя.
Положительная или отрицательная скорость:
При нулевой скорости система стартует из состояния покоя, формируя симметричную траекторию движения.
Пружинная модель применяется через easing-функцию:
import { animate, spring } from "motion";
animate(
".box",
{ x: 300 },
{
easing: spring({
stiffness: 120,
damping: 20,
mass: 1
})
}
);В этом случае движение объекта подчиняется физической модели, а не временной интерполяции.
easing: spring({
stiffness: 300,
damping: 10,
mass: 1
})Характер:
easing: spring({
stiffness: 180,
damping: 24,
mass: 1
})Характер:
easing: spring({
stiffness: 80,
damping: 30,
mass: 3
})Характер:
Движение пружины описывается системой:
Упрощённая модель:
animate(
".modal",
{ opacity: 1, scale: 1 },
{
easing: spring({
stiffness: 200,
damping: 25
})
}
);Поведение:
animate(
element,
{ x: targetX, y: targetY },
{
easing: spring({
stiffness: 250,
damping: 30,
mass: 1
})
}
);Особенности:
animate(
".toggle",
{ x: 24 },
{
easing: spring({
stiffness: 180,
damping: 22
})
}
);Эффект:
Классические easing-функции:
Пружинная модель:
Сравнение поведения:
Критическое демпфирование является состоянием, при котором система возвращается к равновесию максимально быстро без колебаний.
Формальные свойства:
При отклонении от критического значения возникают два режима:
Пружинная модель может использоваться совместно с несколькими свойствами одновременно:
animate(
element,
{
x: 200,
opacity: 1,
scale: 1
},
{
easing: spring({
stiffness: 160,
damping: 26,
mass: 1
})
}
);Все свойства синхронизируются через единую физическую модель, что обеспечивает согласованность движения.
Пружинная система не использует фиксированную длительность. Это приводит к следующему поведению:
Результат:
Результат:
Результат:
Пружинная модель требует вычислений на каждом кадре анимации. При использовании Motion One это оптимизировано через requestAnimationFrame и внутреннюю систему кэширования состояний.
Факторы влияния на производительность:
Предпочтение трансформаций (translate, scale, rotate) снижает нагрузку на layout и повышает стабильность кадровой частоты.