In breve
- L’easing descrive come cambia la velocità di un movimento nel corso della sua durata, invece di restare costante dall’inizio alla fine.
- L’ease-out parte veloce e rallenta, e va bene per ciò che entra; l’ease-in parte piano e accelera, e va bene per ciò che esce.
- Il movimento lineare, a velocità costante, sembra meccanico nei singoli spostamenti ma è giusto per loop continui e rotazioni.
- Una curva cubic-bezier definisce qualsiasi easing con due punti di controllo, e valori fuori dall’intervallo da 0 a 1 creano un superamento del bersaglio.
- Le molle descrivono il movimento con impostazioni fisiche come rigidità e smorzamento, e il CSS può approssimarle con la funzione linear().
In questa pagina
L’easing è il modo in cui cambia la velocità di un movimento mentre si svolge. Senza easing, un oggetto si muove a velocità costante e si ferma di colpo, e sembra meccanico. Con l’easing accelera e rallenta come fanno le cose vere: un cassetto scivola fuori veloce e si assesta, una palla prende velocità mentre cade. Scegliere l’easing giusto è il modo più rapido per far sembrare naturale qualsiasi animazione.
Che aspetto ha l’easing
Chi anima disegna l’easing come una tabella di spaziatura: dove si trova un oggetto a intervalli di tempo uguali. Quando i segni sono equidistanti, la velocità è costante. Quando si ammassano, l’oggetto si muove piano; quando si allargano, si muove veloce. Ecco i quattro easing di base, ciascuno con undici momenti uguali dello stesso movimento da sinistra a destra.
I quattro easing che servono davvero
Il CSS dà un nome a cinque curve di base, e gli strumenti di design usano le stesse idee con nomi simili. Quattro coprono quasi ogni lavoro. La quinta, ease, è quella predefinita del browser: una curva che parte abbastanza veloce e si assesta dolcemente, un po’ come un ease-out più morbido.
| Easing | Curva CSS | Da usare per |
|---|---|---|
| Ease-out | cubic-bezier(0, 0, 0.58, 1) | Ciò che entra o appare: menu, card, titoli |
| Ease-in | cubic-bezier(0.42, 0, 1, 1) | Ciò che esce o scompare |
| Ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) | Ciò che si sposta da un punto a un altro dello schermo |
| Lineare | cubic-bezier(0, 0, 1, 1) | Loop continui, rotazioni, barre di avanzamento, deriva dello sfondo |
La logica è fisica. Qualcosa che arriva dovrebbe già essere in movimento quando appare, poi assestarsi, quindi fa ease-out. Qualcosa che se ne va dovrebbe prendere velocità mentre esce, quindi fa ease-in. Il lineare è sbagliato per un singolo spostamento, ma giusto per tutto ciò che è continuo: un loop con easing ai capi sembra esitare a ogni ripetizione, come spiegano i loop senza stacchi.
Come funzionano le curve cubic-bezier
Ogni curva di easing del CSS è disegnata tra due punti fissi, l’inizio (0, 0) e la fine (1, 1). Una cubic-bezier() aggiunge due punti di controllo che piegano la curva. L’asse orizzontale è il tempo e quello verticale è l’avanzamento. I valori del tempo devono restare tra 0 e 1, ma quelli dell’avanzamento possono superarli, e questo fa sì che un movimento superi il bersaglio e poi torni indietro.
/* A stronger ease-out than the keyword: quick start, long gentle settle */
.card-enter {
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Overshoot: the second y value above 1 carries it past, then back */
.badge-pop {
transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Exits: shorter and easing in */
.card-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);
}Il riferimento di MDN alle funzioni di easing elenca tutte le forme accettate dal CSS, compresa steps() per il movimento fotogramma per fotogramma.
Le molle: easing dalla fisica
Una molla non usa una curva e una durata fisse. Descrivi invece la fisica, di solito rigidità (con quanta forza tira verso il bersaglio), smorzamento (con quanta rapidità si calma) e massa, e il movimento ne segue. Le molle rigide e ben smorzate sembrano scattanti e precise; quelle lente e poco smorzate rimbalzano. Le molle sono popolari nelle interfacce delle app perché rispondono in modo naturale quando un movimento viene interrotto a metà.
Molte librerie di animazione offrono le molle direttamente. Nel CSS semplice, la funzione linear() può approssimarne una elencando punti lungo il suo percorso, ed è supportata dai browser moderni.
/* A simple spring-like settle: past the target, back, then rest */
.sheet-open {
transition: transform 500ms
linear(0, 0.6 20%, 1.08 45%, 0.98 70%, 1);
}linear() unisce i punti con segmenti dritti. Più punti danno una curva più liscia; i generatori possono calcolarli dalle impostazioni della molla.Easing e durata lavorano insieme
La stessa curva dà sensazioni diverse a durate diverse. Un ease-out di 150 millisecondi si legge come uno scatto netto; di 800 come uno scivolamento lento. Adatta entrambi alla distanza e al compito. I principi del motion design indicano le durate tipiche.
Errori comuni
- Movimento lineare per un menu o una card che entra
- Ease-in su ciò che appare, che parte in modo fiacco
- Stessa lunga durata per movimenti piccoli e grandi
- Superamento elastico su tutto
- Easing ai capi di un loop continuo
Meglio
- Ease-out per tutto ciò che arriva
- Ease-in, un po’ più breve, per tutto ciò che se ne va
- Breve per i movimenti piccoli, più lungo per quelli grandi
- Superamento riservato a momenti piccoli e giocosi
- Lineare per i loop, così non esitano mai
L’easing in JavaScript, negli strumenti di design e nel video
Le stesse curve funzionano fuori dal CSS. In JavaScript, la Web Animations API accetta una stringa di easing CSS. Gli strumenti di design e video usano le stesse idee con nomi come ease in, ease out ed ease in and out, di solito con un editor a grafico per le curve personalizzate e, in molti strumenti di prototipazione, preset di molle.
const card = document.querySelector('.card')
card.animate(
[
{ transform: 'translateY(24px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 },
],
{ duration: 300, easing: 'cubic-bezier(0.16, 1, 0.3, 1)', fill: 'both' },
)Qualunque sia la curva, alcune persone preferiscono meno movimento. Rispetta la loro impostazione accorciando o eliminando il movimento; il movimento ridotto mostra come. E per gli sfondi in loop, dove di solito il lineare è giusto, vedi gli sfondi con gradiente animato.
Le domande più frequenti
Cos’è l’easing in un’animazione?
L’easing è il modo in cui cambia la velocità di un movimento nel corso della sua durata. Invece di muoversi a velocità costante, un movimento con easing accelera, rallenta o entrambe le cose, e sembra più naturale.
Qual è la differenza tra ease-in ed ease-out?
L’ease-in parte piano e accelera, e va bene per ciò che esce. L’ease-out parte veloce e rallenta, e va bene per ciò che entra.
Quando devo usare l’easing lineare?
Per il movimento continuo come loop, rotazioni, barre di avanzamento e lenta deriva dello sfondo. Per i singoli movimenti sembra meccanico.
Cosa significa cubic-bezier in CSS?
Definisce una curva di easing con due punti di controllo tra l’inizio e la fine fissi. I valori del tempo restano tra 0 e 1, mentre quelli dell’avanzamento oltre questo intervallo creano il superamento del bersaglio.
Cos’è l’animazione a molla?
Un movimento descritto da impostazioni fisiche come rigidità, smorzamento e massa invece che da una curva fissa. Il CSS può approssimare le molle con la funzione di easing linear().
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
