Lottie è un formato di file basato su JSON e una libreria sviluppata da Airbnb per il play di questi files in Android, iOS e il Web.
Il ritorno delle animazioni nei siti web
Lottie è utilizzata per le animazioni vettoriali (ricordate Macromedia / Adobe Flash?) e permette di creare animazioni con Adobe After Effects ed esportarle in formato JSON attraverso Bodymovin, un plug-in open-source. Quali sono i vantaggi rispetto a gif e png animati o a formati video come mp4? gli stessi del già citato Flash, ovvero animazioni più leggere in termini di peso, essendo vettoriali si adattano ad ogni schermo senza perdita di qualità. Come svantaggio abbiamo il fatto che device più obsoleti potrebbero fare "fatica" a visualizzare le animazioni più complesse e estese.
Il mio primo lottie file
Ho animato il logo di questo sito con After Effects ed esportato tramite Bodymovin. In 80 kb ho l'intera animazione e la grafica svg inglobate in un unico file JSON pronto ad essere visualizzato tramite il Lottie Player di Airbnb (un javascript di circa 300 kb).
Anche il logo precedente era animato, tramite la libreria Velocity.js, programmando ogni movimento tramite script e scrivendo righe e righe di codice. Il vantaggio di poter usare un editor visuale come After Effects è evidente, anche nell'ottica di creare animazioni sempre più complesse.
Se volete visualizzarlo lo trovate cliccando qua.
Lottie player per Drupal
Possiamo caricare e visualizzare facilmente le animazioni Lottie in Drupal aggiungendo la media entity tramite il modulo disponibile qui che estende a questo contenuto la media library gestita dal core.
Animazioni per tutti i gusti
Per esempio l'animazione sotto, dal peso di soli 9kb.
More to come!
Aggiungi un commento