Nozioni di base sull'interpolazione

Scopri come attenuare e dare ponderazione alle tue animazioni.

In natura nulla si sposta in modo lineare da un punto all'altro. In realtà, le cose tendono ad accelerare o decelerare man mano che si muovono. La nostra mente è preparata ad aspettarsi questo tipo di movimento, quindi quando crei animazioni dovresti usarla a tuo vantaggio. Il movimento naturale fa sentire gli utenti più a proprio agio con le app e, a sua volta, migliora l'esperienza complessiva.

Riepilogo

• L'easing rende le animazioni più naturali.
• Scegli animazioni di ease-out per gli elementi UI.
• Evita animazioni di tipo ease-in o ease-in-out, a meno che tu non sia breve; tendono a essere pigri nei confronti degli utenti finali.

Nell'animazione classica, il termine per movimento che inizia lentamente e accelera è "rallentamento", mentre per i movimenti che iniziano rapidamente e decelerano sono considerati "lenta". La terminologia utilizzata più comunemente sul web per questi termini è "facilità in" e "attenuazione", rispettivamente. A volte i due approcci sono combinati e questo si chiama "easy in out". L'allentamento, quindi, è in realtà il processo con cui si rende l'animazione meno acuta o pronunciata.

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'interpolazione (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:

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

Fonte: CSS Transizione, W3C

Puoi anche utilizzare una parola chiave steps, che ti permette di creare transizioni con passaggi discreti, ma le parole chiave elencate sopra sono le più utili per creare animazioni dall'aspetto naturale.

Animazioni lineari

Le animazioni prive di alcun tipo di easing sono dette lineari. Un grafico di una transizione lineare ha il seguente aspetto:

Man mano che il tempo scorre, il valore aumenta di importi uguali. Con il movimento lineare, le cose tendono a sembrare robotiche e innaturali e questo è qualcosa che gli utenti trovano sgradevole. In generale, dovresti 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 di cui sopra con CSS, il codice sarà simile al seguente:

transition: transform 500ms linear;

Animazioni Variazione in uscita

L'allentamento fa sì che l'animazione si avvii più rapidamente rispetto a quelle lineari e che presenta una decelerazione alla fine.

L'allacciamento è in genere la scelta migliore per il lavoro dell'interfaccia utente, perché l'avvio rapido conferisce una sensazione di reattività alle animazioni, pur consentendo un rallentamento naturale alla fine.

Visualizzazione di un'animazione di facilitazione

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

transition: transform 500ms ease-out;

Animazioni con effetto facilitato

Le animazioni con ease-in iniziano lentamente e terminano rapidamente, al contrario di quelle con ease-out.

Questo tipo di animazione è come una grossa pietra che cade, in cui inizia lentamente e colpisce rapidamente il suolo con un pugno mortale.

Da un punto di vista dell'interazione, tuttavia, le agevolazioni possono sembrare un po' insolite a causa della loro brusca fine. le cose che si muovono nel mondo reale tendono a decelerare piuttosto che semplicemente fermarsi all'improvviso. La facilità d'uso ha anche l'effetto negativo di una sensazione di lentezza all'avvio, il che influisce negativamente sulla percezione della reattività nel sito o nell'app.

Visualizzazione di un'animazione con effetto facilitato

Per utilizzare un'animazione di variazione in entrata, in modo simile a questa e a una lineare, puoi utilizzare la relativa parola chiave:

transition: transform 500ms ease-in;

Animazioni con effetto facilitato in entrata

L'accelerazione e la decelerazione sono simili all'accelerazione e alla decelerazione di un'auto e, se usata con accortezza, può produrre un effetto più drammatico rispetto al semplice abbassamento della temperatura.

Non utilizzare una durata dell'animazione troppo lunga a causa della lentezza dell'avvio dell'animazione. In genere, un valore compreso tra 300 e 500 ms è adatto, ma il numero esatto dipende molto dall'aspetto del tuo progetto. Detto questo, a causa dell'avvio lento, della parte intermedia veloce e della fine lenta, c'è un maggiore contrasto nell'animazione, che può essere abbastanza soddisfacente per gli utenti.

Guarda un'animazione con variazione della variazione in entrata

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

transition: transform 500ms ease-in-out;