Accentsconagua
Share
Il linguaggio Material Design è stato creato per risolvere problemi di design piatto su schermi più piccoli fornendo indicazioni visive per elementi interattivi. In questo articolo imparerai alcuni dei concetti fondamentali dell'animazione e come possono essere utilizzati per fornire agli elementi una sensazione naturale e realistica. Vedrai come utilizzare queste idee per deliziare i tuoi utenti aiutandoli a capire l'interfaccia utente della tua app.
Google suggerisce che tutte le animazioni dovrebbero essere reattive, naturali, consapevoli e intenzionali. Gli oggetti sullo schermo dovrebbero agire come se fossero fatti di materiali specifici, con il loro stesso peso e volume che determinano come si muovono e agiscono sullo schermo.
Le animazioni che si verificano dovrebbero essere direttamente correlate ad un'azione e dovrebbero sentirsi motivate e vive. Dovrebbero essere significativi e aiutare a guidare l'utente attraverso la tua applicazione avendo uno scopo e servendo a tale scopo. Le animazioni dovrebbero creare un contesto per i tuoi utenti e aiutare a guidare i loro occhi sullo schermo in modo che siano a conoscenza di ciò che è possibile con la tua app.
Il movimento dovrebbe essere più preoccupato del tempo necessario per passare dal punto A al punto B, piuttosto che la distanza che deve essere coperta. Le distanze cambiano a seconda delle dimensioni dello schermo, ma la velocità di un oggetto aggiungerà enfasi e aiuterà l'utente a capire cosa sta succedendo.
Quando un oggetto deve essere rimosso e un altro aggiunto allo schermo (come ad esempio un pulsante che passa dal gioco alla pausa), allora si dovrebbe trasformare il primo oggetto nel secondo. Allo stesso modo, è possibile segnalare un cambiamento significativo in un oggetto modificando il colore e l'alfa per la voce dello schermo. In questo modo, gli utenti sono consapevoli di cosa è cambiato e puoi mettere in risalto ciò che è disponibile nelle tue app con cui gli utenti possono interagire.
Uno dei più grandi riferimenti per comprendere le animazioni naturali è il libro L'illusione della vita di Frank Thomas e Ollie Johnston, che ha un capitolo che descrive i principi di animazione utilizzati dalla Disney nei loro film d'animazione. Thomas e Johnston delineano 12 principi fondamentali nel loro libro. In questa sezione discuteremo alcuni di questi principi e come possono essere correlati al Material Design.
Quando un oggetto progredisce attraverso un'azione, mostrerà cambiamenti nella sua forma in base al materiale di cui è composto.
Questo concetto è rappresentato dal principio di Squash e Stretch, che può essere meglio illustrato pensando a una palla che rimbalza. Quando le forze esterne agiscono sulla palla, come la gravità o l'accelerazione verso l'alto, la palla si allungherà. Quando l'oggetto colpisce il terreno, si raggruppa e schiaccia verso la superficie. Gli oggetti che si muovono e interagiscono con le superfici nella tua app dovrebbero usare questa idea per dare l'illusione di peso e volume al tuo oggetto mentre si muove.
Nessuna azione importante dovrebbe accadere all'improvviso. Quando esegui un'animazione nelle tue app, dovresti avere un'altra, più piccola, azione che porta all'animazione principale. Questo principio è chiamato anticipazione e aiuta a prevenire la situazione in cui il tuo utente chiede "Perché è successo?" Il movimento naturale inizia generalmente con un riscaldamento piuttosto che con un semplice inizio. In Android, puoi usare il AnticipateInterpolator classe per creare un'animazione che prima esegue il backup di una piccola distanza prima di andare avanti.
Lo scopo della messa in scena è rendere i tuoi contenuti chiari e comprensibili per i tuoi utenti. La tua interfaccia utente e le animazioni dovrebbero essere naturali e ancorate a un compito o a un concetto principale, piuttosto che lasciare al tuo utente insicuro perché qualcosa è accaduto in un modo particolare. Dovresti eseguire solo un'azione importante alla volta per mantenere le cose semplici e consapevoli.
Quando un oggetto in movimento si ferma, non si ferma tutto in una volta (a meno di colpire un altro oggetto solido, ma è qui che entra in gioco Stretch e Squash). Le appendici di un oggetto continueranno a muoversi per un breve periodo dopo l'interruzione del core dell'oggetto.
Quando crei animazioni di materiale, dovresti tentare di utilizzare due posizioni diverse: il punto di arresto desiderato e uno più avanti, in cui l'animazione può fermarsi completamente e quindi tornare alla posizione finale. Ciò impedisce alla tua animazione di sembrare piatta e meccanica. Questo tipo di animazione può essere realizzato usando il BounceInterpolator o OvershootInterpolator classi.
Il movimento naturale non avviene a una velocità costante, e nemmeno le tue animazioni.
Quando un oggetto si muove dall'esterno del campo visivo ed entra nello schermo, dovrebbe farlo rapidamente e quindi rallentare quando arriva alla sua posizione finale. Il movimento rapido attirerà l'attenzione dell'utente e fornirà tempo sufficiente per notarne la destinazione.
Inversamente, un oggetto che lascia lo schermo dovrebbe iniziare lentamente e accelerare quando lascia lo schermo. Questo darà al tuo utente il tempo necessario per notare che l'oggetto si sta muovendo, e mentre accelera per andarsene capirà che dovrebbe smettere di preoccuparsi di quell'elemento sullo schermo.
Quando un oggetto si sposta da una posizione sullo schermo a un'altra, senza lasciare lo schermo in qualsiasi punto, dovresti combinare queste due idee in modo che l'utente possa vedere cosa sta succedendo mentre la tua animazione mantiene una sensazione naturale. Questo principio si applica anche alle liste, poiché scorreranno velocemente quando un utente le lancia, e quindi rallenteranno fino a quando non si fermeranno. Quando una lista salta tra le sezioni, diventa meno immersiva e si sente meccanica. Puoi usare il LinearOutSlowInInterpolator, FastOutLinearInInterpolator, o FastOutSlowInInterpolator per aggiungere questi effetti di animazione.
Con pochissime eccezioni, il movimento naturale si verifica negli archi piuttosto che nelle linee rette precise. Quando si spostano oggetti sullo schermo, oltre al principio di ingresso e uscita lento, è necessario provare a spostare l'oggetto in un percorso generato per evitare un effetto meccanico e innaturale nell'animazione. Puoi usare Android ArcMotion oggetto per spostare gli oggetti lungo un percorso curvo.
Le azioni secondarie sono azioni più piccole e più semplici che supportano l'idea dell'azione principale che si verifica. Le azioni secondarie non dovrebbero oscurare o sembrare più interessanti dell'azione principale, poiché esistono semplicemente per l'enfasi.
Un esempio di azione secondaria potrebbe essere quando apri il cassetto di navigazione in un'applicazione Android. Mentre il cassetto che si apre è l'azione principale, l'animazione dell'icona a forma di hamburger è un semplice effetto che enfatizza ciò che accade senza mettere in ombra il cambiamento principale sullo schermo.
Quando si lavora con le animazioni, il tempismo è tutto. Se un'animazione si muove troppo lentamente o rapidamente, l'utente noterà che qualcosa si sente "spento".
È importante ricordare che Material Design richiede che gli oggetti appaiano come se fossero fatti di una sorta di materiale. Se un oggetto è destinato a sembrare come la carta che scorre su una superficie, non dovrebbe essere spostato rapidamente sullo schermo. Comprensibilmente, non esiste una formula sicura per le velocità di animazione nelle app, ma con un po 'di tempo e di pratica, dovresti essere in grado di creare animazioni tempestive che si adattino al tema e allo scopo della tua app.
Ora che sei a conoscenza dei principali concetti di Material Motion e di alcuni dei principi fondamentali dell'animazione, puoi iniziare a giocare con i vari strumenti disponibili per animare la tua app e aggiungere il pop extra per deliziare i tuoi utenti.
Se vuoi saperne di più sulla creazione di animazioni in Android, consulta il corso approfondito Animate Your Android App di Ashraff Hathibelagal, qui su Envato Tuts+.
Oppure guarda alcuni dei nostri altri tutorial sull'animazione in Android!
