Scopri come attenuare e dare ponderazione alle tue animazioni.
In natura, nulla si muove in modo lineare da un punto all'altro. In realtà, gli oggetti tendono ad accelerare o decelerare man mano che si muovono. Il nostro cervello è programmato per aspettarsi questo tipo di movimento, quindi quando crei un'animazione, devi sfruttarlo a tuo vantaggio. Il movimento naturale consente agli utenti di sentirsi più a proprio agio con le tue app, il che si traduce in un'esperienza complessiva migliore.
Riepilogo
- La funzionalità di attenuazione rende le animazioni più naturali.
- Scegli animazioni di ease-out per gli elementi UI.
- Evita le animazioni con transizione graduale in entrata o in uscita, a meno che non tu possa mantenerle brevi. 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". I termini più utilizzati sul web per questi termini sono "facilità in" e "riduzione in uscita", rispettivamente. A volte le due tecniche vengono combinate, in questo caso si parla di "dissolvenza in entrata e in uscita". L'easing, quindi, è il processo di attenuazione dell'animazione.
Parole chiave di Facilitazione
Le transizioni e le animazioni CSS ti consentono entrambi di scegliere il tipo di easing da utilizzare per le 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 per avere molta più libertà di esprimere la personalità della tua app.
Ecco alcune delle parole chiave che puoi utilizzare in CSS:
linearease-inease-outease-in-out
Fonte: Transizioni CSS, 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. Un grafico di una transizione lineare ha il seguente aspetto:
Con il passare del tempo, il valore aumenta in modo proporzionale. Con il movimento lineare, le cose tendono a sembrare robotiche e innaturali, il che è qualcosa che gli utenti trovano sgradevole. In generale, devi evitare il movimento lineare.
Che tu stia programmando le animazioni utilizzando CSS o JavaScript, scoprirai che è sempre disponibile un'opzione per il movimento lineare.
Guardare un'animazione lineare
Per ottenere l'effetto riportato sopra con CSS, il codice sarà simile al seguente:
transition: transform 500ms linear;
Animazioni con decelerazione
L'animazione con decelerazione all'uscita inizia più rapidamente rispetto a quelle lineari e presenta anche una decelerazione alla fine.
La transizione graduale è in genere la scelta migliore per l'interfaccia utente, perché l'inizio veloce conferisce alle animazioni un senso di reattività, consentendo al contempo un rallentamento naturale alla fine.
Visualizzare un'animazione con decelerazione
Esistono molti modi per ottenere un effetto di transizione graduale, ma il più semplice è la parola chiave ease-out in CSS:
transition: transform 500ms ease-out;
Animazioni con transizione graduale
Le animazioni con accelerazione iniziano lentamente e terminano rapidamente, il contrario delle animazioni con decelerazione.
Questo tipo di animazione è simile alla caduta di una pietra pesante, che inizia lentamente e colpisce il suolo rapidamente con un tonfo sordo.
Dal punto di vista dell'interazione, tuttavia, le transizioni graduali possono sembrare un po' insolite a causa della loro fine brusca; gli oggetti che si muovono nel mondo reale tendono a decelerare anziché fermarsi improvvisamente. Le animazioni graduali hanno anche l'effetto negativo di sembrare lente all'avvio, il che influisce negativamente sulla percezione della reattività del tuo sito o della tua app.
Visualizzazione di un'animazione con effetto facilitato
Per utilizzare un'animazione con accelerazione iniziale, analogamente alle animazioni con decelerazione finale e lineari, puoi utilizzare la relativa parola chiave:
transition: transform 500ms ease-in;
Animazioni con transizione graduale
L'attenuazione all'inizio e alla fine è simile all'accelerazione e alla decelerazione di un'auto e, se usata con giudizio, può produrre un effetto più marcato rispetto all'attenuazione alla fine.
Non utilizzare una durata dell'animazione eccessivamente lunga, a causa della lentezza dell'inizio graduale dell'animazione. In genere è adatto un intervallo di 300-500 ms, ma il numero esatto dipende molto dall'aspetto del progetto. Detto questo, a causa dell'inizio lento, della parte centrale veloce e della fine lenta, il contrasto nell'animazione è aumentato, il che può essere molto soddisfacente per gli utenti.
Visualizzare un'animazione con easing in-out
Per ottenere un'animazione con transizione graduale, puoi utilizzare la parola chiave CSS ease-in-out:
transition: transform 500ms ease-in-out;