Nozioni di base sull'easing

Scopri come ammorbidire e dare peso alle tue animazioni.

Paul Lewis

In natura, nulla si muove in modo lineare da un punto all'altro. In realtà, gli oggetti tendono ad accelerare o decelerare mentre si muovono. Il nostro cervello è programmato per aspettarsi questo tipo di movimento, quindi quando crei un'animazione, dovresti sfruttarlo a tuo vantaggio. Il movimento naturale fa sentire gli utenti più a loro agio con le tue app, il che a sua volta porta a un'esperienza complessiva migliore.

Riepilogo

• L'easing rende le animazioni più naturali.
• Scegli animazioni con easing in uscita per gli elementi UI.
• Evita le animazioni ease-in o ease-in-out, a meno che non siano brevi, perché tendono a sembrare lente agli utenti finali.

Nell'animazione classica, il termine per il movimento che inizia lentamente e accelera è "slow in", mentre per il movimento che inizia rapidamente e decelera è "slow out". La terminologia più comunemente utilizzata sul web per questi effetti è rispettivamente "ease in" ed "ease out". A volte i due effetti vengono combinati, dando vita all'effetto "ease in out". L'easing, quindi, è in realtà il processo che rende l'animazione meno brusca o pronunciata.

Parole chiave di easing

Sia le transizioni che le animazioni CSS ti consentono di scegliere il tipo di easing che vuoi utilizzare per le tue animazioni. Puoi utilizzare parole chiave che influiscono sull'easing (o timing, come viene talvolta chiamato) dell'animazione in questione. Puoi anche personalizzare completamente l'easing, il che ti offre molta più libertà di esprimere la personalità della tua app.

Ecco alcune delle parole chiave che puoi utilizzare in CSS:

• linear
• ease-in
• ease-out
• ease-in-out

Fonte: CSS Transitions, W3C

Puoi anche utilizzare una parola chiave steps, che ti consente di creare transizioni con passaggi discreti, ma le parole chiave elencate sopra sono le più utili per creare animazioni che sembrano naturali.

Animazioni lineari

Le animazioni senza alcun tipo di easing sono definite lineari. Il grafico di una transizione lineare ha il seguente aspetto:

Con il passare del tempo, il valore aumenta di importi uguali. Con il movimento lineare, gli elementi tendono a sembrare robotici e innaturali, il che può risultare fastidioso per gli utenti. In generale, dovresti evitare il movimento lineare.

Sia che tu stia programmando le tue animazioni utilizzando CSS o JavaScript, scoprirai che esiste sempre un'opzione per il movimento lineare.

Visualizza un'animazione lineare

Per ottenere l'effetto sopra con CSS, il codice sarà simile al seguente:

transition: transform 500ms linear;

Animazioni di uscita graduale

L'easing out fa sì che l'animazione inizi più rapidamente rispetto a quelle lineari e che deceleri alla fine.

L'easing out è in genere la soluzione migliore per il lavoro sull'interfaccia utente, perché l'avvio rapido dà alle animazioni una sensazione di reattività, consentendo al contempo un rallentamento naturale alla fine.

Guarda un'animazione con easing in uscita

Esistono molti modi per ottenere un effetto di easing out, ma il più semplice è la parola chiave ease-out in CSS:

transition: transform 500ms ease-out;

Animazioni con effetto di easing in

Le animazioni con easing in iniziano lentamente e terminano rapidamente, l'opposto delle animazioni con easing out.

Questo tipo di animazione è come una pietra pesante che cade, dove inizia lentamente e colpisce il suolo rapidamente con un tonfo sordo.

Dal punto di vista dell'interazione, tuttavia, gli ease-in possono sembrare un po' insoliti a causa della loro fine brusca; gli oggetti che si muovono nel mondo reale tendono a decelerare anziché fermarsi improvvisamente. Le animazioni con easing in hanno anche l'effetto negativo di sembrare lente all'avvio, il che influisce negativamente sulla percezione della reattività nel tuo sito o nella tua app.

Guarda un'animazione con easing in

Per utilizzare un'animazione con easing in, analogamente alle animazioni con easing out e lineari, puoi utilizzare la relativa parola chiave:

transition: transform 500ms ease-in;

Animazioni con effetto di easing in-out

L'accelerazione e la decelerazione sono simili a un'auto che accelera e decelera e, se utilizzate con criterio, possono fornire un effetto più drammatico rispetto alla sola decelerazione.

Non utilizzare una durata dell'animazione eccessivamente lunga, a causa della lentezza di un avvio con easing in dell'animazione. Un valore compreso tra 300 e 500 ms è in genere adatto, ma il numero esatto dipende molto dall'atmosfera del progetto. Detto questo, a causa dell'inizio lento, della parte centrale veloce e della fine lenta, l'animazione presenta un contrasto maggiore, che può essere molto soddisfacente per gli utenti.

Guarda un'animazione con easing in-out

Per ottenere un'animazione ease-in-out, puoi utilizzare la parola chiave CSS ease-in-out:

transition: transform 500ms ease-in-out;