After Effects è il principale strumento per la realizzazione di un’animazione Lottie, di cui abbiamo fatto una panoramica nel precedente articolo di questa serie. Questa volta andremo ad analizzare il flusso di creazione dal software, che in pochi e semplici passi ci consentirà di ottenere un file json immediatamente utilizzabile nei nostri progetti su tutte le piattaforme compatibili.

BodyMovin

Prima di procedere sarà necessario installare l’estensione per BodyMovin, che ci consentirà di esportare le animazioni in formato json. In alternativa è possibile utilizzare il plugin messo a disposizione da LottieFiles, che però non andremo ad analizzere in questo articolo. Il plugin implementa tutte le feature messe a disposizione da BodyMovin, offrendo inoltre, tra le tante aggiunte, la possibilità di esportare sticker per telegram, un interessante strumento di preview in real time dell’animazione e funzionalità di test sui dispositivi mobile, andando a rendere più efficienti le iterazioni sul lavoro. Per utilizzare LottieFiles bisogna aver creato e attivato un account.

Esportazione da Adobe XD / Sketch

Se abbiamo già realizzato un wireframe su Adobe XD possiamo utilizzare come punto di partenza per l’animazione uno o più elementi o componenti da esso, esportandoli su After Effects semplicemente andando su File -> Export e selezionando la voce omonima. Verranno generati tutti gli asset e i livelli, sui quali potremo andare ad operare come di consueto. Si può utilizzare un procedimento simile con Sketch, ma è necessario aver installato AEUX (è necessario un installer per file ZXP).

Nuova Composizione da After Effects

Per realizzare un’animazione Lottie direttamente da After Effects non ci sono particolari accorgimenti iniziali, basta selezionare come di consueto l’opzione Nuova Composizione che, dopo averci mostrato tramite modale la schermata di setup dell’animazione, ci consente di iniziare a lavorare. Una volta terminato il lavoro bisogna andare su Finestra -> Estensioni e selezionare BodyMovin.

Da qui possiamo scegliere la composizione attuale, una destinazione per il file json di output e quindi procedere al render della nostra animazione. Una volta terminato il procedimento possiamo visualizzare un’anteprima direttamente tramite l’estensione o recarci su LottieFiles (che offre anche una vasta gamma di animazioni Lottie gratuite) e trascinare semplicemente il nostro file nella schermata del browser; se siamo già loggati ci verrà mostrata la schermata di anteprima dell’animazione, con varie possibilità di personalizzazione, altrimenti dovremmo prima procedere al login o alla registrazione; come detto precedentemente la stessa funzionalità di preview è disponibile in real time se si utilizza l’omonimo plugin.

L’intero procedimento ci consente di produrre animazioni di alta qualità; il workflow è ottimizzato dall’utilizzo dei tool, dall’abbattimento delle barriere di piattaforma e dalla possibilità di interoperare in maniera efficiente tra designer e sviluppatori; l'output che abbiamo ottenuto è infatti immediatamente utilizzabile via codice ed è in parte personalizzabile anche da chi cura il front-end o le applicazioni mobile. Inoltre, anche se dovessero essere necessarie modifiche che richiedono l'intervento del designer, si andrà a modificare unicamente il progetto sorgente ed esportare un nuovo JSON, che dovrà solo essere sostituito a quello precedente negli asset di sviluppo.