Come creare un'animazione LottieFiles in After Effects

LottieFiles ha creato un tipo di file modificabile dopo il rendering veloce, scalabile ed è facile per te essere coinvolto e creare animazioni in questo formato. Usando Adobe After Effects e alcuni plugin, puoi far parte del nuovissimo clamore del tipo di file: Lottie.

Cos'è una lotteria?

A Lottie, o dotLottie, è un tipo di file che sta prendendo d'assalto gli sviluppatori web. Potresti aver realizzato animazioni da includere nei tuoi progetti, che si tratti di social media, web design o UX e UI design. E probabilmente salvi le tue animazioni come file GIF, SVG o PNG. Un file Lottie è tutte le parti buone di quei tipi di file, ma più piccoli, più veloci e più facili da modificare dopo il rendering.

LottieFiles è un enorme database di animazioni predefinite salvate nei formati Lottie o JSON. Queste animazioni vengono visualizzate in tempo reale, consentendo una spedizione più rapida nei tuoi progetti. Non è necessario attendere il download di questi file; appariranno non appena la pagina si aprirà.

Per saperne di più su LottieFiles, controlla il nostro introduzione alla Lottie.

Iniziare

Creeremo una Lottie usando Adobe After Effects, ma ci sono altri software che puoi usare per creare la tua animazione Lottie. Puoi utilizzare Adobe Animate con il plug-in LottieFiles per creare una Lottie. Puoi anche convertire un'animazione in formato SVG in una Lottie se hai già creato un'animazione in questo formato.

After Effects è la nostra prima scelta, tuttavia, dato che LottieFiles è stato creato originariamente per essere utilizzato in After Effects. Iniziamo.

1. Crea la tua animazione

L'aspetto animato della tua Lottie è lo stesso di qualsiasi altro formato. Abbiamo creato l'illustrazione della nostra animazione utilizzando Adobe Illustrator. Ciò mantiene i livelli separati e pronti per l'importazione in After Effects. Una volta importata l'illustrazione, puoi adattare i livelli della composizione per l'animazione finale.

Le animazioni di Lottie funzionano a ciclo continuo, quindi consideralo per i punti finali e iniziali del tuo progetto. L'animazione dovrebbe essere semplice e lunga circa tre secondi.

2. Scarica i plugin

Ci sono due plugin che puoi usare per creare un file Lottie: il plugin LottieFiles o il plugin Bodymovin. Entrambi sono disponibili per After Effects, ma il plug-in LottieFiles può essere trovato anche in altri software. Ognuno di loro fa cose leggermente diverse, ma in questo momento ci concentreremo sul plug-in LottieFiles.

Per scaricare il plug-in LottieFiles, vai su Pagina del plug-in LottieFiles After Effects. Troverai due opzioni di download.

L'opzione a destra richiede un Extension Manager di Anastasiy che funziona sia con Mac che con Windows. Dopo aver scaricato Extension Manager, scarica il plug-in ZXP dalla pagina LottieFiles.

Dopo aver scaricato il plug-in ZXP, apri Anastasiy Extension Manager, fai clic su Effetti postumi, seleziona il plug-in LottieFiles dall'elenco e premi Installare.

Tornando alla pagina del plug-in LottieFiles, scarica anche il plug-in Adobe Exchange; apri l'app desktop Creative Cloud e installa il plug-in. Ritorna al tuo finito animazione in After Effects.

Alcune persone hanno un errore di autorizzazione quando utilizzano questi plugin. Per evitare questo problema, vai a Effetti postumi > Preferenze > Script ed espressioni > Script dell'applicazione e spuntare la casella per Consenti agli script di scrivere file e accedere alla rete.

Una volta fatto, il popup di LottieFiles ti chiederà di accedere. Se non hai già un account LottieFiles, ora è il momento di crearne uno.

3. Esporta la tua lotteria

Con i plug-in LottieFiles installati, puoi eseguire il rendering dell'animazione di Lottie. Mentre sei sulla composizione dell'animazione finita, fai clic su Finestra > Estensioni > LottieFiles. Verrà visualizzato un popup con i nomi delle tue composizioni. Clicca il freccia verde accanto al nome della tua composizione, verrà visualizzata la finestra di rendering di Lottie.

Dopo alcuni secondi, la tua animazione apparirà nella finestra popup. L'animazione verrà riprodotta in tempo reale in loop. Qui puoi scegliere di salvare la tua animazione o caricare la tua animazione nella libreria LottieFiles.

Cliccando Salva come ti darà due opzioni di esportazione: Lottie JSON (*.json) o dotLottie (*.lottie). Il file dotLottie è un file zippato che include metadati, di cui non abbiamo davvero bisogno per l'esportazione. Siamo andati con Lottie JSON.

Il tuo file esportato sarà un file di testo, non un file di animazione visiva; ecco come funzionano i file JSON. E se volessi che l'animazione sia pronta per l'uso? Vediamo come puoi accedervi.

Come puoi usare la tua animazione Lottie

Per caricare la tua Lottie nella libreria LottieFiles, fai clic su Caricamento. Questo eseguirà il rendering per alcuni secondi. Quindi, fai clic sul pulsante con il globo su di esso. Si apre il sito Web LottieFiles in cui puoi inviare la tua animazione Lottie alla libreria LottieFiles. Assegna un nome al tuo file e premi Giù le mani.

Una volta che l'animazione è stata approvata nella libreria LottieFiles, puoi utilizzare il plug-in LottieFiles in software come Adobe XD, Figma o Sketch per inviare l'animazione al tuo progetto.

Esistono altri modi per utilizzare l'animazione di LottieFiles oltre a quella direttamente nella libreria dei plug-in. Puoi modificare ulteriormente la tua animazione Lottie dalla finestra nel browser. Offre un pannello dei livelli di base; puoi cambiare il colore di sfondo, la velocità di riproduzione, la frequenza dei fotogrammi e alcune altre cose.

Dalla finestra Handoff, puoi scaricare la tua animazione come file File JSON per l'implementazione nello sviluppo web e design, oppure puoi convertirlo in una GIF per usi più convenzionali. Puoi anche incorporare la tua animazione con un codice di incorporamento HTML e ci sono anche opzioni iOS e Android, quindi puoi spedire l'animazione nel tuo web design.

L'incorporamento dell'HTML di Lottie ti consente di modificare il codice per modificare la tua animazione. Puoi cambiare colori e dimensioni direttamente nel codice quando lo aggiungi al tuo sito web.

Il download dell'app LottieFiles sul telefono consente di eseguire la scansione del codice QR dell'animazione per visualizzare in anteprima l'animazione nell'app. Puoi anche utilizzare la tastiera LottieFiles e rilasciare dotLottie come commento in alcuni post.

Crea una lotteria in After Effects

Anche se può ancora sembrare un tipo di file non convenzionale, dal momento che non puoi semplicemente caricare la tua animazione direttamente sui social media come puoi con una GIF o un PNG, Lottie offre molti vantaggi agli sviluppatori Web e ai designer che utilizzano plug-in o incorporano codici nei loro disegni.

I file Lottie e JSON consentono di risparmiare spazio e tempo di caricamento e preservare la qualità rispetto ai tipi di file tradizionali. LottieFiles crea costantemente nuovi modi per implementare i progetti, le possibilità sono infinite.

Come creare un'animazione in movimento usando Procreate

Creare un'animazione in movimento in Procreate è facile e questo articolo ti mostrerà come farlo.

Leggi Avanti

Circa l'autore