Пролетна анимация: Физиката на естественото движение на потребителския интерфейс
Научете как пролетната анимация работи в дизайна на потребителския интерфейс. Разберете коравина, затихване, маса и скорост. Създайте базирани на естествена физика анимации за 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>
);
}