Scegli l'attenuazione appropriata per il tuo progetto, che si tratti di un'attenuazione all'inizio, alla fine o entrambe. Potresti anche usare i rimbalzi per un divertimento ancora maggiore.
Dopo aver discusso le varie opzioni disponibili per le animazioni con transizione graduale, quale tipo dovresti utilizzare nei tuoi progetti e quali durate dovrebbero avere le animazioni?
Riepilogo
- Utilizza animazioni con decelerazione per gli elementi dell'interfaccia utente. Una decelerazione quintica è molto piacevole, anche se rapida.
- Assicurati di utilizzare la durata dell'animazione; le transizioni graduali in uscita e in entrata devono essere comprese tra 200 e 500 ms, mentre i rimbalzi e le transizioni graduali elastiche devono avere una durata più lunga, compresa tra 800 e 1200 ms.
In generale, un'animazione in svanimento è la scelta giusta e sicuramente un'opzione predefinita ottimale. È veloce da avviare, il che conferisce alle animazioni una sensazione di reattività, che è auspicabile, ma con un bel rallentamento alla fine.
Oltre a quella specificata con la parola chiave ease-out in CSS, esiste un gruppo di equazioni di transizione graduale ben note, che variano in termini di "aggressività". Per un effetto di attenuazione rapida, valuta la possibilità di utilizzare una attenuazione quintica.
Guarda un'animazione con easing quintico in uscita
Altre equazioni di easing, in particolare quelle con rimbalzi o elastiche, devono essere utilizzate con parsimonia e solo quando sono appropriate per il progetto. Poche cose possono distogliere un utente da un'esperienza come un'animazione spiacevole. Se il tuo progetto non è pensato per essere divertente, non inserire elementi che si spostano nell'interfaccia utente. Al contrario, se stai creando un sito che dovrebbe essere leggero, utilizza i rimbalzi.
Provali con facilità, scopri quali corrispondono alla personalità del tuo progetto e parti da lì. Per un elenco completo dei tipi di animazioni e delle relative demo, visita il sito easings.net.
Scegli la durata dell'animazione giusta
È importante che l'animazione aggiunta al progetto abbia la durata corretta. Se è troppo breve, l'animazione risulterà aggressiva e tagliente; se è troppo lunga, sarà fastidiosa e ostruente.
- Effetti di transizione graduale: circa 200-500 ms. In questo modo, l'occhio ha la possibilità di vedere l'animazione, ma non si sente ostacolato.
- Apparizioni graduali: circa 200-500 ms. Tieni presente che alla fine ci sarà un brusco stop e nessuna modifica ai tempi potrà attenuare l'impatto.
- Effetti elastici o di rimbalzo: circa 800-1200 ms. Devi attendere che l'effetto elastico o di rimbalzo si "assesti". Senza questo tempo extra, la parte elastica che rimbalza dell'animazione sarà aggressiva e sgradevole alla vista.
Ovviamente, si tratta solo di linee guida. Fai esperimenti in tutta tranquillità e scegli ciò che ritieni più adatto ai tuoi progetti.