Cos'è l'animazione di Lottie? Tutto quello che devi sapere su Lottie

La creazione di animazioni complesse per Android, iOS, ecc. è, ovviamente, un processo lungo. È anche come designer o animatore, a volte un processo rompicapo.

Devi caricare file di immagini di grandi dimensioni per ogni dimensione dello schermo o scrivere mille righe di codice fragile e difficile da mantenere. Di conseguenza, nonostante sia un potente strumento per comunicare idee e produrre esperienze utente accattivanti, la maggior parte delle app non utilizza l'animazione video.

Non deve essere così! Questi problemi sono scomparsi da tempo e ci sono molti formati di file, piattaforme e così via utili che puoi sfruttare per semplificare il tuo flusso di lavoro. Uno di questi formati è Lottie.

In questo blog vi parlerò di questo formato interessante e maneggevole.

Cos'è Lotti?

Negli anni prima di Lottie, i motion designer creavano le loro animazioni e poi le inviavano agli sviluppatori di software per metterle in azione. Le opzioni di attuazione erano inadeguate e di portata limitata.

Era pratica comune per gli sviluppatori esportare animazioni in formati di bassa qualità o tentare di ricreare il design dell'animazione nel codice da zero al meglio delle proprie capacità. Non sorprende che non fosse la tecnica più efficiente e che spesso producesse animazioni inefficienti e completamente diverse dall'output previsto dal motion designer.

Hernan Torrisi ha avuto l'idea di esportare la rappresentazione di un'animazione creata in Adobe After Effects e di generare l'animazione in fase di esecuzione nel 2015. Le capacità di scripting di After Effects sono state utilizzate per iterare un progetto di animazione e un plug-in per Adobe After Effects chiamato Bodymovin è stato sviluppato che ha prodotto una descrizione dell'animazione in formato JSON.

Insieme al lettore per il browser, ha fornito il primo renderer in assoluto per il formato, che è stato creato utilizzando Javascript.

Dalla sua introduzione nel 2017, LottieFiles ha fornito ad animatori e sviluppatori una piattaforma per testare, condividere ed esporre rapidamente le loro animazioni sul web. Il formato file JSON (Lottie Animation-based File Format) consente ai progettisti di trasferire animazioni tra piattaforme senza sforzo.

Lottie prende il nome da Charlotte 'Lotte' Reiniger, una regista tedesca ampiamente considerata la pioniera mondiale dell'animazione di silhouette. Non ci sono limitazioni sulle piattaforme che supporta. È possibile accedervi tramite iOS, Android e Web.

Una combinazione di componenti vettoriali e raster viene utilizzata in Lottie per creare animazioni di alta qualità che sono di natura multipiattaforma. Mirando a determinati elementi e parametri dell'animazione, offre la possibilità di aggiungere interattività e modificare i parametri durante il runtime.

Si tratta di piccoli file che possono essere utilizzati su qualsiasi dispositivo e possono essere ridimensionati senza perdita di qualità. I file Lottie possono essere riutilizzati dagli sviluppatori nella loro programmazione.

Cosa può fare una Lottie?

Lottie consente di riprodurre la tua animazione su qualsiasi dispositivo Web o mobile in alta qualità e, con impostazioni intelligenti, rendi la tua animazione più attraente.

Una cosa da tenere a mente è che durante la creazione per Lottie, i file JSON devono essere il più piccoli possibile per la piattaforma mobile. Usa le tecniche genitoriali quando possibile.

Il codice aggiuntivo viene aggiunto durante la duplicazione degli stessi fotogrammi chiave su un livello simile. Dovresti usare le animazioni dei fotogrammi chiave del percorso quando possibile.

La maggior parte dello spazio viene consumato aggiungendo dati per ogni vertice su ciascun fotogramma chiave.

La tracciatura automatica o la tecnica del wiggler ti danno un fotogramma chiave per ogni fotogramma, ma rendere molto pesanti le dimensioni del tuo file JSON può influire negativamente sulle prestazioni. Dovrebbero essere bilanciati con la composizione per funzionare in modo fluido ed efficiente.

Dove puoi usare Lottie?

Secondo lo sviluppatore, è possibile accedere a Lottie praticamente da qualsiasi piattaforma, inclusi il Web e i dispositivi mobili. In altre parole, possono essere facilmente integrati sia nelle applicazioni mobili che nelle applicazioni basate sul Web.

Su alcuni servizi di messaggistica, le animazioni di Lottie possono anche essere utilizzate come adesivi. Non è limitato al web o ai dispositivi mobili in termini di limitazioni tecniche. Sulle applicazioni desktop e su alcuni smartwatch, potresti trarne vantaggio.

Sono disponibili vari plugin e librerie multipiattaforma per Web, iOS, Android, Flutter, React, Vue, Angular e Sketch. Figma, After Effects e altro sono supportati nei file di animazione di Lottie.

Perché usare l'animazione di Lottie?

È naturale pensare perché dovresti usare l'animazione di Lottie quando ci sono così tante altre opzioni disponibili.

Ecco perché:

Può essere giocato ovunque

Il web player Lottie è compatibile con qualsiasi browser che supporta Javascript contemporaneo, il che significa che Lottie può essere giocato su qualsiasi browser moderno che supporta Javascript. Inoltre, poiché i kit di sviluppo software più recenti offrono contenuti Web dinamici, l'integrazione di Lottie in qualsiasi programma desktop o laptop diventa più semplice.

Sono inoltre disponibili librerie per implementare la riproduzione di Lottie su piattaforme IOS, Android e Tizen, rendendo possibile l'utilizzo di Lottie in applicazioni mobili sulla stragrande maggioranza di smartphone e tablet. Le animazioni di Lottie vengono rapidamente adottate dalle grandi aziende per migliorare i loro frontend mobili, mentre le startup utilizzano Lottie nei loro progetti di prodotti per separarsi dalla concorrenza.

Facile da mantenere

Le animazioni di Lottie vengono salvate come testo normale, il che significa che sono visualizzabili dagli esseri umani. Di conseguenza, l'utilizzo di Lottie nello sviluppo di interfacce applicative riduce il tempo di debug e il tempo totale di distribuzione. Inoltre, i file Lottie in testo normale sono meno complicati da mantenere e mettere a punto poiché non richiedono l'uso di strumenti software specializzati.

I dati di testo nelle animazioni di Lottie sono strutturati come JSON, il che significa che sono pronti per l'assimilazione in Javascript o in qualsiasi altro ambiente di sviluppo di applicazioni che accetti JSON senza la necessità di ulteriori analisi o elaborazioni. Di conseguenza, Lottie è diventato il formato grafico animato più utilizzato e portatile al mondo.

È dinamico

La struttura JSON dei dati Lottie consente una facile manipolazione e sostituzione del suo contenuto con molti gradi di granularità, che vanno da valori frazionari a grandi porzioni di oggetti. Il materiale sostitutivo, inoltre, può essere caricato dinamicamente da qualsiasi sito. Di conseguenza, Lottie è attualmente il formato di grafica animata più dinamico e ampiamente utilizzato.

Scalabilità

Poiché gli elementi visivi convenzionali sono ingombranti, molte aziende li utilizzano con parsimonia nelle interfacce utente delle applicazioni. Troppi elementi grafici possono aumentare i costi di archiviazione e recupero, soprattutto durante la ricerca e l'ordinamento dei dati contestualmente.

Se utilizzati in soluzioni di grandi dimensioni, i file Lottie possono ridurre al minimo le spese di archiviazione e ordinamento/ricerca contestuale. Poiché le lotte sono dinamiche, le app devono caricare solo i componenti che devono essere aggiornati in un dato momento.

Massima qualità

Utilizza vettori per rappresentare le dimensioni delle forme geometriche, nonché qualificatori per definire le loro caratteristiche e il modo in cui continuano a muoversi durante l'animazione. Il giocatore di Lottie esegue il rendering alla risoluzione nativa dello schermo. Ciò garantisce che le animazioni di Lottie vengano sempre visualizzate con la migliore qualità possibile.

Un utente ingrandisce un'animazione di Lottie e il giocatore la ridisegna alla risoluzione nativa. Ciò significa che le animazioni di Lottie non pixelano mai, non importa quanto siano ingrandite.

In un punto cruciale

Interfacce utente rapide, dinamiche ed eleganti possono essere ottenute utilizzando Lotties. Il consumo di larghezza di banda del cliente verrebbe notevolmente ridotto a causa delle minori esigenze di archiviazione per il componente ospitato dell'applicazione.

Se non vedi l'ora di realizzare video di animazione di Lottie, il posto migliore in cui vorresti essere è webdew.

In webdew, i video esplicativi, l'animazione dei personaggi, le animazioni 2D e le animazioni della lavagna sono ampiamente realizzati da abili animatori e designer di motion graphic. Contattaci per saperne di più.

Editore: Amrutha