Scegli l'interferenza appropriata per il tuo progetto: in entrata, in uscita o entrambi. Magari usi i rimbalzi per divertirti ancora di più!
Dopo aver illustrato le varie opzioni disponibili per l'interferenza nelle animazioni, che tipo dovresti utilizzare nei tuoi progetti e di che durata devono avere le tue animazioni?
Riepilogo
- Utilizza animazioni di variazione in uscita per gli elementi dell'interfaccia utente; la facilitazione Quintic è molto piacevole, anche se rapida.
- Assicurati di utilizzare la durata dell'animazione: gli ease-out e le ease-in devono essere compresi tra 200 ms e 500 ms, mentre i rimbalzi e le variazioni elastiche devono avere una durata maggiore, compresa tra 800 ms e 1200 ms.
In linea di massima, ease-out è la chiamata giusta e certamente un buon valore predefinito. Si avvia rapidamente e dà alle animazioni una sensazione di reattività, il che è auspicabile, ma con un bel rallentamento alla fine.
Esiste un gruppo di equazioni di facilitazione molto note oltre a quello specificato con la parola chiave ease-out in CSS, la cui "aggressività" varia. Per un effetto di variazione rapida, puoi utilizzare il metodo Quintic ease-out.
Guarda l'animazione di una quintica di facilitazione
Altre equazioni di easing, in particolare rimbalzi o facilità elastiche, devono essere usate con parsimonia e solo quando è appropriato per il tuo progetto. Ci sono alcuni elementi che portano l'utente fuori da un'esperienza, come un'animazione scioccante. Se il tuo progetto non è pensato per essere divertente, allora evita che gli elementi rimbalzano intorno all'interfaccia utente. Al contrario, se state creando un sito che dovrebbe sembrare allegro, allora usate assolutamente i rimbalzi.
Gioca con facilità, scopri quali corrispondono alla personalità del tuo progetto e parti da lì. Per un elenco completo dei tipi di easing, oltre alle demo, consulta il sito easings.net.
Scegli la durata dell'animazione corretta
È importante che qualsiasi animazione aggiunta al progetto abbia la durata corretta. Troppo breve e l'animazione risulterà aggressiva e nitida; troppo lunga e sarà fastidiosa e invasiva.
- Esercizi in uscita: circa 200 ms-500 ms. In questo modo lo sguardo non riesce a vedere l'animazione, ma non sembra ostruita.
- Esercizi in entrata: circa 200 ms-500 ms. Tieni presente che alla fine il risultato sarà scossato e che nessun numero di modifiche del tempo attenuerà l'impatto.
- Effetti di rimbalzo o elastici: circa 800 ms-1200 ms. Devi lasciare tempo affinché l'effetto elastico o rimbalzo si regoli. Senza questo tempo aggiuntivo, la parte del rimbalzo elastico dell'animazione sarà aggressiva e sgradevole alla vista.
Ovviamente queste sono solo linee guida. Sperimenta con le tue esigenze e scegli quello che ti sembra più adatto ai tuoi progetti.