Wiosenna animacja: fizyka naturalnego ruchu interfejsu użytkownika
Dowiedz się, jak działa animacja wiosenna w projektowaniu interfejsu użytkownika. Zrozumienie sztywności, tłumienia, masy i prędkości. Twórz animacje oparte na fizyce naturalnej dla React i SwiftUI.
Rdzeń na wynos
Animacja sprężyny modeluje ruch interfejsu użytkownika przy użyciu fizycznego zachowania układu masa-sprężyna-tłumik, w którym ruch komponentu zależy od sztywności (jak mocno przyciąga do spoczynku), tłumienia (jak szybko traci energię) i masy (jak dużą bezwładność przenosi). W przeciwieństwie do animacji opartych na czasie trwania, sprężyny automatycznie reagują na prędkość użytkownika i można je przerwać w dowolnym momencie, nie powodując przerwy wizualnej.
Dlaczego sprężyny wydają się bardziej naturalne niż krzywe czasu trwania
W świecie fizycznym nie ma pojęć takich jak „łatwość wejścia” czy „bezier sześcienny (0,4, 0, 0,2, 1)”. Obiekty fizyczne przyspieszają pod wpływem sił i zwalniają na skutek tarcia. Kiedy szuflada się wysuwa, nabiera rozpędu; kiedy go puścisz, tarcie zatrzymuje go. Fizyka wiosny replikuje tę fizyczną rzeczywistość w oprogramowaniu, dlatego też iOS UIKit, Android Motion Compose i ExodeUI to systemy animacji wprowadzone po raz pierwszy na wiosnę.
Wyjaśnienie parametrów sprężyn
Zrozumienie każdego parametru pozwala zaprojektować dokładnie taki efekt fizyczny, jaki chcesz.
Sztywność (napięcie)
Jak mocno sprężyna ciągnie do wartości spoczynkowej. Wysoka sztywność (600+) zapewnia szybki i responsywny interfejs użytkownika, przypominający reakcję naciśnięcia przycisku. Niska sztywność (100–200) zapewnia powolny, płynny ruch odpowiedni do przejść między stronami lub pływających elementów otoczenia.
Tłumienie (tarcie)
Ile energii traci sprężyna na cykl. Przy krytycznym tłumieniu sprężyna osiąga stan spoczynku bez drgań. Niedostatecznie tłumione sprężyny (niskie tarcie) będą się przeciążać i odbijać. Współczynnik tłumienia / (2 × sqrt (sztywność × masa)) określa, czy tłumienie jest niedostateczne, krytycznie tłumione, czy też nadmiernie tłumione.
Masa
Ile bezwładności przenosi animowany element. Większa masa sprawia, że animacja wydaje się cięższa, a zmiana kierunku zajmuje więcej czasu. Większość animacji interfejsu użytkownika utrzymuje masę na poziomie 1,0 i kontroluje wyczucie poprzez sztywność i tłumienie.
Prędkość początkowa
Jeśli użytkownik przesunie lub rzuci element, sprężyna może zostać zainicjowana z tą prędkością gestu, tworząc płynną ciągłość pomiędzy gestem a osadzeniem sprężyny.
Praktyczne ustawienia sprężyn dla komponentów interfejsu użytkownika
Te ustawienia wstępne obejmują najpopularniejsze wzorce interakcji z interfejsem użytkownika.
- Naciśnięcie przycisku: sztywność 500, tłumienie 30 — natychmiastowe, szybkie, minimalne odbicie
- Rozszerzenie karty: sztywność 280, tłumienie 24, masa 1,2 – płynne, wyważone rozszerzanie
- Szuflada/blacha: sztywność 340, tłumienie 28 — zdecydowane, z lekkim osiadaniem
- Powiadomienie o sprężystości: sztywność 400, tłumienie 18 — zabawne przeregulowanie
- Przejście strony: sztywność 220, tłumienie 22, masa 1,4 — kinowa, ważona
Fragment wdrożenia produkcyjnego
// 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>
);
}