Nozioni di base sull'interpolazione

Scopri come attenuare e dare ponderazione alle tue animazioni.

Paul Lewis

In natura nulla si sposta in modo lineare da un punto all'altro. In realtà, le cose tendono ad accelerare o rallentare nel movimento. Il nostro cervello è in grado di aspettarsi questo tipo di movimento, quindi durante l'animazione dovresti usarlo a tuo vantaggio. Il movimento naturale fa sentire più a proprio agio gli utenti con le tue app e, di conseguenza, l'esperienza generale è migliore.

Riepilogo

• L'interpolazione rende le animazioni più naturali.
• Scegli animazioni di variazione per gli elementi dell'interfaccia utente.
• Evita le animazioni con facilità, a meno che non sia possibile mantenerle brevi, in quanto tendono a sembrare lente per gli utenti finali.

Nell'animazione classica, il termine per movimento che inizia lentamente e accelera è "lenta", mentre per un movimento che inizia rapidamente e rallenta è "lenta". La terminologia più comunemente utilizzata sul web per questi termini è "ease in" e "ease out", rispettivamente. A volte, queste due funzionalità vengono combinate, un'operazione chiamata "ease in out". L'interferenza, quindi, è il processo con cui l'animazione viene resa meno pesante o pronunciata.

Agevolazione delle parole chiave

Sia le transizioni che le animazioni CSS ti consentono di scegliere il tipo di easing da utilizzare per le animazioni. Puoi utilizzare le parole chiave che influiscono sull'interferenza (o timing, come a volte viene 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 Transiziones, 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 senza alcun tipo di easing sono definite lineare. Un grafico di una transizione lineare ha il seguente aspetto:

Man mano che il tempo passa, il valore aumenta di importo uguale. Con il movimento lineare, le cose tendono a sembrare robotizzate e innaturali, e questo è qualcosa che gli utenti trovano sconvolgente. In linea di massima, dovresti evitare il movimento lineare.

Che tu stia programmando le animazioni utilizzando CSS o JavaScript, scoprirai che c'è sempre un'opzione per il movimento lineare.

Visualizzare un'animazione lineare

Per ottenere l'effetto sopra indicato con CSS, il codice sarebbe simile al seguente:

transition: transform 500ms linear;

Animazioni di spaziatura

L'allargamento fa sì che l'animazione si avvii più velocemente rispetto a quelle lineari e alla fine presenti anche una decelerazione.

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

Visualizzare un'animazione di variazione

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

transition: transform 500ms ease-out;

Animazioni di accessibilità

Le animazioni con facilità all'inizio hanno inizio lentamente e terminano rapidamente, il che è l'opposto delle animazioni di facilità.

Questo tipo di animazione è come una pesante caduta di un sasso, in cui inizia lentamente e colpisce rapidamente terra con un colpo mortale.

Dal punto di vista dell'interazione, tuttavia, le facilitazioni possono sembrare un po' insolite a causa della loro brusca fine; gli eventi che si muovono nel mondo reale tendono a decelerare piuttosto che semplicemente a fermarsi improvvisamente. La facilità di inserimento ha anche l'effetto negativo di una sensazione di debolezza all'inizio, con un impatto negativo sulla percezione della reattività nel sito o nell'app.

Visualizzare un'animazione di variazione

Per utilizzare un'animazione di variazione in più, in modo simile alle animazioni lineari e di variazione, puoi utilizzare la sua parola chiave:

transition: transform 500ms ease-in;

Animazioni di ease-in-out

Il divario sia all'interno che all'esterno è simile all'accelerazione e alla decelerazione di un'auto e, utilizzato con accortezza, può offrire un effetto più drammatico rispetto al semplice attenuarsi.

Non utilizzare una durata dell'animazione troppo lunga, a causa della lentezza di un avvio dell'animazione. Un elemento compreso tra 300 e 500 ms è in genere adatto, ma il numero esatto dipende molto dall'aspetto del progetto. Detto questo, a causa dell'inizio lento, della fase intermedia e della fine lenta, il contrasto nell'animazione aumenta, il che può essere abbastanza soddisfacente per gli utenti.

Visualizzare un'animazione di variazione in uscita

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

transition: transform 500ms ease-in-out;