Skip to main content
LanguageItaliano
Fisica e token4 minuti di letturaOttobre 2026

Perché le animazioni primaverili sono migliori delle transizioni cubiche-bezier?

Risposta breve

Le molle sono migliori per l'interfaccia utente interattiva perché possono iniziare dalla velocità e dalla posizione correnti dell'elemento, quindi le animazioni interrotte e i gesti rilasciati continuano senza problemi. Sembrano anche naturali con poche impostazioni. Le curve cubiche di Bezier vanno ancora bene e sono più semplici per dissolvenze, cambiamenti di colore e movimento che non viene mai interrotto.

Punto chiave

  • Una curva cubica di Bezier ha durata e forma fisse
  • Una molla è definita da rigidità, smorzamento e massa e si stabilizza quando lo dice la fisica
  • Le molle portano velocità, quindi le interruzioni e i gesti rimangono fluidi
  • I Bezier sono più semplici e funzionano bene per dissolvenze e transizioni non interattive
  • Molte piattaforme moderne, inclusa SwiftUI, utilizzano per impostazione predefinita le molle

Un allentamento cubico di Bezier descrive il modo in cui un valore si sposta dall'inizio alla fine in un tempo fisso, ad esempio 300 millisecondi con l'allentamento. È prevedibile e supportato ovunque, incluso il semplice CSS.

Una sorgente descrive invece un sistema fisico. Si impostano rigidità, smorzamento e massa e il valore si sposta verso il suo obiettivo come farebbe un peso su una molla, con o senza superamento. La durata deriva dalla fisica.

La differenza pratica è l'interruzione. Se un utente tocca di nuovo mentre un pannello si sta aprendo, un'animazione Bezier di solito riparte dalla posizione corrente con velocità zero, il che sembra un intoppo. Una molla parte dalla posizione e dalla velocità attuali, quindi il movimento si piega dolcemente verso il nuovo bersaglio. Lo stesso vale quando un utente lancia una carta o un foglio con un gesto: la molla continua con la velocità del dito.

Anche le molle risultano naturali con meno decisioni: una o due impostazioni danno una sensazione coerente tra elementi di diverse dimensioni.

Beziers ha ancora un posto. Per opacità, colore e transizioni che non vengono mai interrotte, una breve rimozione è più semplice e funziona in CSS senza JavaScript. Molte squadre utilizzano molle per il movimento e bezier per le dissolvenze.

Domande frequenti

CSS può eseguire animazioni primaverili?

CSS non ha una molla fisica, ma la funzione di andamento lineare() può approssimare una curva di molla per una durata fissa. Non trasporta velocità tra le interruzioni.

Quali sono le buone impostazioni primaverili per l'interfaccia utente?

Inizia con un superamento minimo o nullo per la maggior parte dell'interfaccia utente e un piccolo rimbalzo per gli elementi giocosi. Sintonizzati al tatto su un dispositivo reale.

Le molle sono più lente a scorrere?

Non notevolmente nelle librerie e nei runtime moderni. Il costo sta principalmente nel rendering di ciò che si muove, non nei calcoli primaverili.

Ogni animazione dovrebbe essere una primavera?

No. Usa molle per il movimento e l'interazione e un semplice allentamento per dissolvenze e cambi di colore.

Guide ed esempi correlati

Senti la differenza nel browser

Confronta una molla e un Bezier fianco a fianco, interrompili e copia i valori che ti piacciono.

Apri il generatore di molle
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →