Animazione primaverile: la fisica del movimento naturale dell'interfaccia utente
Scopri come funziona l'animazione primaverile nella progettazione dell'interfaccia utente. Comprendere la rigidezza, lo smorzamento, la massa e la velocità. Crea animazioni naturali basate sulla fisica per React e SwiftUI.
Punto chiave
L'animazione Spring modella il movimento dell'interfaccia utente utilizzando il comportamento fisico di un sistema massa-molla-smorzatore, in cui il movimento di un componente è governato dalla rigidità (con quanta forza tira verso il riposo), dallo smorzamento (quanto velocemente perde energia) e dalla massa (quanta inerzia trasporta). A differenza delle animazioni basate sulla durata, le molle rispondono automaticamente alla velocità dell'utente e possono essere interrotte in qualsiasi momento senza causare discontinuità visiva.
Perché le molle sembrano più naturali delle curve di durata
Il mondo fisico non ha concetti come "ease-in-out" o "cubic-bezier(0.4, 0, 0.2, 1)." Gli oggetti fisici accelerano a causa delle forze e decelerano a causa dell'attrito. Quando un cassetto si apre, ha slancio; quando lo rilasci, l'attrito lo ferma. La fisica primaverile replica questa realtà fisica nel software, motivo per cui iOS UIKit, Android Motion Compose e ExodeUI sono tutti sistemi di animazione primaverili.
Spiegazione dei parametri primaverili
Comprendere ciascun parametro ti consente di progettare esattamente la sensazione fisica che desideri.
Rigidità (tensione)
Con quanta forza la molla spinge verso il suo valore di riposo. L'elevata rigidità (600+) crea un'interfaccia utente scattante e reattiva come il feedback della pressione dei pulsanti. La bassa rigidità (100–200) crea un movimento lento e fluttuante adatto per transizioni di pagina o elementi fluttuanti ambientali.
Smorzamento (attrito)
Quanta energia perde la molla per ciclo. Nello smorzamento critico la molla si ferma senza oscillare. Le molle non smorzate (basso attrito) superano il limite e rimbalzano. Il rapporto smorzamento / (2 × sqrt(rigidità × massa)) determina se sei sottosmorzato, criticamente smorzato o sovrasmorzato.
Massa
Quanta inerzia porta l'elemento animato. Una massa maggiore rende l'animazione più pesante e impiega più tempo a cambiare direzione. La maggior parte delle animazioni dell'interfaccia utente mantengono la massa a 1,0 e controllano la sensazione attraverso rigidità e smorzamento.
Velocità iniziale
Se l'utente fa scorrere o lancia un elemento, la molla può essere inizializzata con la velocità del gesto, creando una continuità perfetta tra il gesto e l'assestamento della molla.
Preset pratici di primavera per componenti dell'interfaccia utente
Queste preimpostazioni coprono i modelli di interazione dell'interfaccia utente più comuni.
- Rubinetto del pulsante: rigidità 500, smorzamento 30: rimbalzo istantaneo, scattante e minimo
- Espansione della scheda: rigidità 280, smorzamento 24, massa 1,2 — espansione regolare e ponderata
- Cassetto/foglio: rigidità 340, smorzamento 28 — deciso, con leggero assestamento
- Notifica rimbalzante: rigidità 400, smorzamento 18 - superamento giocoso
- Transizione di pagina: rigidità 220, smorzamento 22, massa 1.4 — cinematografico, ponderato
Estratto di implementazione in produzione
// 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>
);
}