Spring Animation: The Physics of Natural UI Motion
Дізнайтеся, як працює весняна анімація в дизайні інтерфейсу користувача. Розуміння жорсткості, демпфування, маси та швидкості. Створюйте анімацію на основі природної фізики для React і SwiftUI.
Основний винос
Пружинна анімація моделює рух інтерфейсу користувача, використовуючи фізичну поведінку системи маса-пружина-амортизатор, де рух компонента регулюється жорсткістю (наскільки сильно він тягне до стану спокою), амортизацією (як швидко він втрачає енергію) і масою (скільки інерційний момент він має). На відміну від анімації на основі тривалості, пружини автоматично реагують на швидкість користувача та можуть бути перервані в будь-який момент, не викликаючи візуальних розривів.
Чому пружини виглядають більш природно, ніж криві тривалості
Фізичний світ не має таких понять, як «легкість входу-виходу» або «кубічний безьє (0,4, 0, 0,2, 1)». Фізичні об’єкти прискорюються за рахунок сил і сповільнюються за рахунок тертя. Коли шухляда відкривається, вона має імпульс; коли ви відпускаєте його, тертя приводить його в стан спокою. Весняна фізика відтворює цю фізичну реальність у програмному забезпеченні, тому iOS UIKit, Android Motion Compose та ExodeUI — усі системи анімації, які створюють весну.
Пояснення параметрів пружини
Розуміння кожного параметра дозволяє створити саме те фізичне відчуття, яке ви хочете.
Жорсткість (натяг)
Наскільки сильно пружина тягне до свого значення спокою. Висока жорсткість (600+) створює швидкий, чуйний інтерфейс, подібний до натискання кнопки. Низька жорсткість (100–200) створює повільний плаваючий рух, придатний для переходів сторінок або навколишніх плаваючих елементів.
Демпфування (тертя)
Скільки енергії втрачає пружина за цикл. При критичному демпфіруванні пружина досягає спокою без коливань. Пружини з недостатнім демпфуванням (з низьким коефіцієнтом тертя) перекидаються і підстрибують. Співвідношення демпфування / (2 × sqrt (жорсткість × маса)) визначає, чи є у вас недостатнє, критичне чи надмірне демпфування.
маса
Скільки інерції несе анімований елемент. Більша маса робить анімацію важчою, і для зміни напрямку потрібно більше часу. Більшість анімацій інтерфейсу зберігають масу на рівні 1,0 і контролюють відчуття через жорсткість і демпфування.
Початкова швидкість
Якщо користувач проводить пальцем або кидає елемент, пружину можна ініціалізувати з цією швидкістю жесту, створюючи безперебійну безперервність між жестом і положенням пружини.
Практичні пружинні пресети для компонентів інтерфейсу користувача
Ці стилі охоплюють найпоширеніші моделі взаємодії інтерфейсу користувача.
- Натискання кнопки: жорсткість 500, демпфування 30 — миттєве, різке, мінімальний відскок
- Розширення карти: жорсткість 280, демпфування 24, маса 1,2 — плавне, зважене розширення
- Ящик/лист: жорсткість 340, демпфування 28 — вирішальне, з невеликим осіданням
- Стрибкий сповіщення: жорсткість 400, амортизація 18 — грайливе перевищення
- Перехід сторінок: жорсткість 220, демпфування 22, маса 1,4 — кінематографічний, зважений
Фрагмент впровадження виробництва
// Spring presets in React with the Motion library (motion.dev).
// The same stiffness / damping / mass values can be saved as motion tokens.
import { motion } from 'motion/react';
const springs = {
snappy: { type: 'spring', stiffness: 500, damping: 30, mass: 1 },
smooth: { type: 'spring', stiffness: 280, damping: 24, mass: 1.2 },
bouncy: { type: 'spring', stiffness: 400, damping: 18, mass: 1 },
cinematic: { type: 'spring', stiffness: 220, damping: 22, mass: 1.4 },
};
export function PhysicsCard({ open }) {
return (
<motion.div
animate={{ y: open ? 0 : 24, scale: open ? 1 : 0.96 }}
transition={springs.smooth}
>
Smooth physics-based card reveal
</motion.div>
);
}