В основе пружинных анимаций лежит классическая модель гармонического осциллятора, где движение элемента описывается балансом между упругой силой и сопротивлением среды. В контексте Motion One эти свойства задаются через параметры stiffness и damping, определяющие характер перехода от начального состояния к целевому.
Пружинная анимация отличается от линейных или кубических easing-функций тем, что не опирается на фиксированное время интерполяции. Вместо этого движение определяется физической моделью, что позволяет получать более естественные и динамичные переходы.
Параметр stiffness задаёт силу, с которой система стремится вернуть объект в целевое положение.
Чем выше значение stiffness:
Низкие значения stiffness приводят к:
В физической модели stiffness соответствует коэффициенту упругости пружины k в законе Гука:
[ F = -kx]
где:
Параметр damping определяет, насколько быстро система теряет энергию колебаний.
Высокий damping:
Низкий damping:
В физике damping связан с силой сопротивления, пропорциональной скорости:
[ F_d = -c v]
где:
Эти параметры нельзя рассматривать изолированно, поскольку итоговое поведение системы определяется их соотношением.
Основные режимы поведения:
1. Перемедленное движение (overdamped) damping значительно выше критического уровня относительно stiffness:
2. Критическое демпфирование (critically damped) оптимальный баланс:
3. Недодемпфированная система (underdamped) damping недостаточен:
Motion One интерпретирует stiffness и damping как параметры численного решения дифференциального уравнения движения пружины. Результат — непрерывная адаптация скорости и ускорения на каждом кадре.
Простейшая конфигурация анимации:
import { animate } from "motion";
animate(
".box",
{ x: 300 },
{
type: "spring",
stiffness: 120,
damping: 20
}
);В этом примере:
При увеличении stiffness поведение системы изменяется по следующим закономерностям:
Пример высокой жёсткости:
animate(
".panel",
{ scale: 1.2 },
{
type: "spring",
stiffness: 300,
damping: 25
}
);Такая конфигурация характерна для микроинтеракций, где требуется мгновенный отклик интерфейса.
Damping регулирует энергорассеивание системы и напрямую влияет на визуальную устойчивость.
При увеличении damping:
Пример высокого демпфирования:
animate(
".modal",
{ opacity: 1, y: 0 },
{
type: "spring",
stiffness: 200,
damping: 40
}
);Такое поведение характерно для интерфейсных модальных окон, где важна предсказуемость завершения анимации.
Критическое демпфирование возникает при определённом соотношении stiffness и damping, при котором система достигает цели максимально быстро без колебаний.
Условно:
[ damping ]
Хотя Motion One не требует ручного вычисления этого значения, понимание зависимости позволяет предсказуемо формировать поведение анимаций.
Интерактивные элементы (кнопки, hover-состояния):
{
stiffness: 400,
damping: 30
}Модальные окна и панели:
{
stiffness: 200,
damping: 35
}Декоративные анимации:
{
stiffness: 150,
damping: 10
}Физические параметры в Motion One не соответствуют линейному восприятию человеком. Увеличение stiffness в два раза не воспринимается как «в два раза быстрее». Визуальный эффект зависит от:
Поэтому настройка stiffness и damping рассматривается как процесс итеративной калибровки поведения, а не точного расчёта.
Типовые проблемы возникают при дисбалансе параметров:
При анимации нескольких свойств одновременно (например,
x, scale, opacity) spring-модель
применяется к каждому параметру независимо, но визуальное восприятие
зависит от их комбинации.
animate(
".card",
{
x: 100,
scale: 1.1,
opacity: 1
},
{
type: "spring",
stiffness: 180,
damping: 22
}
);Согласованность stiffness и damping в таких случаях влияет на ощущение единого движения, а не набора отдельных трансформаций.