Animație de primăvară: Fizica mișcării interfeței naturale
Aflați cum funcționează animația de primăvară în designul UI. Înțelegeți rigiditatea, amortizarea, masa și viteza. Creați animații naturale bazate pe fizica pentru React și SwiftUI.
Core Takeaway
Animația de primăvară modelează mișcarea UI folosind comportamentul fizic al unui sistem de masă-arc-amortizor, în care mișcarea unei componente este guvernată de rigiditate (cât de puternic trage spre repaus), amortizare (cât de repede pierde energie) și masă (cât de multă inerție poartă). Spre deosebire de animațiile bazate pe durată, arcurile răspund automat la viteza utilizatorului și pot fi întrerupte în orice moment fără a provoca discontinuitate vizuală.
De ce izvoarele se simt mai naturale decât curbele de durată
Lumea fizică nu are concepte precum „ease-in-out” sau „cubic-bezier(0,4, 0, 0,2, 1).” Obiectele fizice accelerează din cauza forțelor și decelerează din cauza frecării. Când un sertar se deschide, are impuls; când îl eliberezi, frecarea îl aduce în repaus. Fizica de primăvară reproduce această realitate fizică în software, motiv pentru care iOS UIKit, Android Motion Compose și ExodeUI sunt toate sisteme de animație de primăvară.
Parametrii arcului explicați
Înțelegerea fiecărui parametru vă permite să proiectați exact senzația fizică pe care o doriți.
Rigiditate (tensiune)
Cât de puternic trage arcul spre valoarea sa de repaus. Rigiditatea ridicată (600+) creează o interfață de utilizare rapidă și receptivă, precum feedbackul la apăsarea butonului. Rigiditatea scăzută (100–200) creează o mișcare lentă, plutitoare, potrivită pentru tranzițiile de pagină sau elementele plutitoare ambientale.
Amortizare (frecare)
Câtă energie pierde arcul pe ciclu. La amortizare critică, arcul ajunge la repaus fără a oscila. Arcurile cu amortizare insuficientă (frecare scăzută) se vor depăși și vor sări. Raportul amortizare / (2 × sqrt(rigiditate × masă)) determină dacă sunteți subamortizat, amortizat critic sau supraamortizat.
Masa
Câtă inerție poartă elementul animat. O masă mai mare face ca animația să se simtă mai grea și durează mai mult pentru a schimba direcția. Majoritatea animațiilor UI mențin masa la 1.0 și controlează senzația prin rigiditate și amortizare.
Viteza initiala
Dacă utilizatorul glisează sau aruncă un element, arcul poate fi inițializat cu acea viteză a gestului, creând o continuitate perfectă între gest și așezarea arcului.
Presetări practice de resort pentru componentele UI
Aceste presetări acoperă cele mai comune modele de interacțiune cu UI.
- Buton: rigiditate 500, amortizare 30 — instantanee, rapidă, săritură minimă
- Expansiunea cardului: rigiditate 280, amortizare 24, masa 1,2 — expansiune lină, ponderată
- Sertar / foaie: rigiditate 340, amortizare 28 — decisiv, cu ușoară tasare
- Notificare bouncy: rigiditate 400, amortizare 18 — depășire jucăușă
- Tranziție de pagină: rigiditate 220, amortizare 22, masă 1,4 — cinematografic, ponderat
Fragment de implementare a producției
// 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>
);
}