Jarná animácia: Fyzika prirodzeného pohybu používateľského rozhrania
Zistite, ako funguje jarná animácia v dizajne používateľského rozhrania. Pochopte tuhosť, tlmenie, hmotnosť a rýchlosť. Vytvárajte prirodzené animácie založené na fyzike pre React a SwiftUI.
Core Takeaway
Pružinová animácia modeluje pohyb používateľského rozhrania pomocou fyzikálneho správania systému hmota-pružina-tlmič, kde je pohyb komponentu riadený tuhosťou (ako silne ťahá smerom k pokoju), tlmením (ako rýchlo stráca energiu) a hmotnosťou (koľko zotrvačnosti nesie). Na rozdiel od animácií založených na trvaní pružiny automaticky reagujú na rýchlosť používateľa a môžu byť prerušené v akomkoľvek bode bez toho, aby spôsobili vizuálnu diskontinuitu.
Prečo sa pružiny cítia prirodzenejšie ako krivky trvania
Fyzický svet nemá pojmy ako „ease-in-out“ alebo „cubic-bezier(0,4, 0, 0,2, 1).“ Fyzické objekty sa zrýchľujú v dôsledku síl a spomaľujú v dôsledku trenia. Keď sa zásuvka vysunie, má hybnosť; keď ho uvoľníte, trenie ho privedie do pokoja. Jarná fyzika kopíruje túto fyzickú realitu v softvéri, a preto sú iOS UIKit, Android Motion Compose a ExodeUI prvými animačnými systémami.
Vysvetlenie jarných parametrov
Pochopenie každého parametra vám umožní navrhnúť presne taký fyzický pocit, aký chcete.
Tuhosť (napätie)
Ako silno pružina ťahá smerom k svojej pokojovej hodnote. Vysoká tuhosť (600+) vytvára svižné a citlivé používateľské rozhranie podobné stlačeniu tlačidla. Nízka tuhosť (100–200) vytvára pomalý, plynulý pohyb vhodný pre prechody stránok alebo okolité plávajúce prvky.
Tlmenie (trenie)
Koľko energie stráca pružina za cyklus. Pri kritickom tlmení sa pružina dostane do pokoja bez kmitania. Nedostatočne tlmené pružiny (nízke trenie) budú prekmitávať a odskakovať. Pomer tlmenia / (2 × sqrt (tuhosť × hmotnosť)) určuje, či ste nedostatočne, kriticky alebo nadmerne tlmený.
omša
Koľko zotrvačnosti nesie animovaný prvok. Vyššia hmotnosť spôsobuje, že animácia je ťažšia a trvá dlhšie, kým zmení smer. Väčšina animácií používateľského rozhrania si zachováva hmotnosť na hodnote 1,0 a pocit ovládania prostredníctvom tuhosti a tlmenia.
Počiatočná rýchlosť
Ak používateľ potiahne alebo hodí prvok, pružinu možno inicializovať s touto rýchlosťou gesta, čím sa vytvorí plynulá kontinuita medzi gestom a nastavením pružiny.
Praktické pružinové predvoľby pre komponenty používateľského rozhrania
Tieto predvoľby pokrývajú najbežnejšie vzorce interakcie používateľského rozhrania.
- Klepnutie na gombíky: tuhosť 500, tlmenie 30 — okamžité, svižné, minimálny odskok
- Roztiahnutie karty: tuhosť 280, tlmenie 24, hmotnosť 1,2 — plynulé, vážené roztiahnutie
- Zásuvka / plech: tuhosť 340, tlmenie 28 — rozhodujúce, s miernym usadzovaním
- Upozornenie na odskok: tuhosť 400, tlmenie 18 — hravý prepad
- Prechod strán: tuhosť 220, tlmenie 22, hmotnosť 1,4 — filmový, vážený
Snippet implementácie výroby
// 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>
);
}