Esporta le animazioni After Effects a HTML5

L'animazione sul web è qui per rimanere. È in tutto, dai sottili movimenti che aiutano a portare il nostro Design UI Alla vita, alle esperienze di tela completamente animate e agli esperimenti WebGL che stanno sfidando ciò che una volta pensavamo fosse possibile nel browser.

Mentre la creatività dei Devs e le capacità dei browser stanno aumentando, l'animazione sul Web è stata a lungo una cattiva relazione con il video - qualcosa che la comunità della grafica di movimento si è avvicinata con cautela per anni. Ricorda che se hai un sito complesso da mantenere, il tuo web hosting Il servizio deve essere al momento.

• La guida dei professionisti al design dell'interfaccia utente

Gli sviluppatori hanno fatto affidamento su biblioteche come Greensock e Snap.SVG per fare il sollevamento pesante nella riproduzione dell'animazione attraverso JavaScript. Mentre questi strumenti hanno dato molta flessibilità, non possono essere paragonati alla precisione e alla sottigliezza dell'animazione che può essere raggiunta utilizzando After Effects cc. 'S proprio timeline e grafici per facilitare. Da una prospettiva web, dopo che gli effetti sono molto adatti per modificare e provare il movimento prima di impegnarlo al codice.

accedere Bodymovin. , un'estensione rivoluzionaria per Adobe After Effects che esporta l'animazione direttamente da After Effects a JavaScript da mostrare e manipolata nel browser. Creato da Hernan Torrissi. , Bodymovin rimuove molte delle barriere tra animatore e sviluppatore. A livello di base, il plugin agisce come il magico "rendering for web" feca adobe dimenticato. Al suo più avanzato apre nuove possibilità per l'animazione interattiva.

Bodymovin è un collegamento nella catena di strumenti, plugin e sistemi che si alzano per soddisfare alcune di queste nuove possibilità. Airbnb's Lottie. e I fotogrammi chiave di Facebook. Entrambi costruiscono queste basi - e stanno finalmente portando lo strumento di animazione più potente per il web.

Perché usare BodyMovin?

SVG ha rilevato su Internet e ha portato con sé l'aspettativa che tutto dovrebbe essere alta qualità, luce e scalabile. Bodymovinn rende tutto nella tua composizione a svg splendidamente croccante che mantiene la sua qualità vettoriale a qualsiasi dimensione. Non è più compromesso per alleggerire quella GIF o costringere i tuoi utenti a caricare file video gonfiori.

Oltre a semplificare il processo di esportazione delle tue animazioni, Bodymovin si apre il modo più potenziale per gli sviluppatori per ottenere creativi con nuove esperienze interattive. Dai un'occhiata a Codepen per alcuni dei modi fantastici in cui è stata utilizzata l'estensione, da Interactive IK Rigs al testo interattivo di tipo AS-as-you-you-you.

Per semplificare ulteriormente il tuo processo Web Dev, prova a Builder del sito web .

L'animazione esportata può essere manipolata nel browser come qualsiasi altro elemento, permettendoci di pensare all'animazione come strumento interattivo e sperimentale all'interno del web design. E ora a causa del bodymovin, portando le tue animazioni al web non è mai stato così facile. In questo tutorial imparerai come esportare un'animazione da After Effects e creare un'animazione di looping semplice che risponde al clic dell'utente.

Come preparare i tuoi file After Effects

Il supporto per le funzioni After Effects è migliorato notevolmente e puoi aspettarti di ottenere risultati piuttosto buoni direttamente dalla scatola. Detto questo, i tuoi strati fantasiosi volanti 3D non giocheranno bene quindi essere consapevoli dei limiti prima di iniziare. Prima di iniziare un progetto, scaricare sempre l'ultima versione di Bodymovin e controllare la pagina GitHub per vedere quali sono le funzionalità attualmente supportate.

Non essere troppo frettoloso per spostarti sulla parte divertente ... I file di Tidy fanno una mente ordinata. In questo caso ti aiuteranno anche a prendere un po 'del lavoro extra lontano dal browser e ti darà una riproduzione seta liscia. Innanzitutto, ti consigliamo di assicurarti che il tuo contenuto sia in After Effects Forma gli strati per la piena potenza vettoriale. Per convertire qualsiasi file illustratore per modellare gli strati è semplicemente possibile fare clic con il pulsante destro del mouse e scegliere Crea forme dallo strato vettoriale. Eventuali strati che non sono forme in questa fase saranno quindi convertiti in immagini e non saranno resi come vettori.

Successivamente, hai un assegno attraverso i tuoi strati e sublayer; C'è una buona possibilità che puoi semplificare il contenuto della forma senza sacrificare qualsiasi cosa. Prova a ridurre il numero di gruppi, percorsi e riempie a soli gli elementi essenziali.

Abbi cura delle maschere

Le maschere sono un modo semplice per scivolare in questa fase. Tieni presente che le maschere alfa funzionano con il rendero svg ma non verrà visualizzato se scegliere di passare a tela. Le maschere possono essere costose nelle prestazioni, quindi usarle in modo efficiente.

Rendering

Bodymovin funziona in due parti: un'estensione After Effects che converte i dati di animazione in un file JSON e un giocatore Bodymovin.js da includere nella tua pagina web in grado di interpretare questo file e renderlo nel browser.

Pensi che i tuoi file siano buoni per andare? Apri l'estensione del bodymovin attraverso la finestra e GT; Estensioni e poi bodymovin.

Una volta premuto Aggiorna, vedrai un elenco di tutte le composizioni in questo progetto After Effects. Seleziona il Comp scelto e quindi scegli una cartella di destinazione all'interno del tuo progetto Web. Quando sei felice, fai clic e guarda la magia. Quando è finito, riceverai un messaggio "finito". Congratulazioni! Hai appena esportato un file JSON con tutte le informazioni che il giocatore deve ricreare l'animazione.

Per testare la tua animazione appena esportata, fai clic sull'anteprima e GT; Rende attuali e ricorda di strofinare la timeline come si potrebbe individuare qualcosa che sembra un po 'diverso da ciò che ti aspetteresti. Se fai spot eventuali problemi saltare indietro e controlla i tuoi livelli - potrebbe essere una funzione non supportata o un'espressione utilizzata in After Effects.

Alcuni plugin After Effects come Gullhose ora supportano il bodymovin. Gullhose fa uso di strati guida e strati nascosti. Per attivare questi, basta fare clic sulla creazione delle impostazioni accanto alla composizione scelta e selezionare le funzionalità di cui hai bisogno.

Se tutto sembra buono, c'è solo un'altra cosa che devi fare prima di partire dopo gli effetti dietro. In questa fase dovresti avere un nuovo file di dati.json che descrive la tua animazione, ma nessun giocatore bodymovin per interpretarlo. Nell'estensione, fai clic sul pulsante "Ottieni il lettore" in alto a destra e salvarlo con il tuo file JSON.

Carica l'animazione

Ora hai tutto il necessario, saltiamo dritto nel codice e stabiliamo le basi per ottenere la tua animazione mostrando sulla pagina.

Prima crea un nuovo contenitore #Anim_Container. per tenere la tua animazione. Devi anche includere il bodymovin.js. file prima del tag del corpo di chiusura. Prossima dì a Bodymovin tutto sulla tua animazione e caricarlo nel nuovo contenitore.

Camminiamo attraverso la configurazione passo dopo passo:

 VAR container = document.getElementbyID ('Ann_Container');
// imposta la nostra animazione

var animdata = {
Contenitore: contenitore,
Rendering: "svg",
AUTOPLAY: TRUE,
Loop: vero,
Path: 'data.json'
};;
var anim = bodymovin.loadanimation (animdata); 

È necessario definire tutti i parametri per l'animazione. Dì a BodyMovin il contenitore che vuoi che l'animazione si carichi e poi dirlo per rendere l'animazione come elementi SVG. Successivamente, racconta all'animazione di giocare non appena è caricato e che vuoi che loopphi all'inizio quando è finito.

La proprietà del percorso indica il giocatore BodyMovin per trovare il file di dati JSON per l'animazione. A causa della politica di condivisione delle risorse cross-origin (Cors), la tecnica che utilizzerai per accedere al file JSON funzionerà solo se si è su un server o un server locale. Per funzionare localmente, è possibile effettuare quelle dati.json in un file JavaScript che assegna l'oggetto a una variabile. In tal caso il tuo setup potrebbe assomigliare a questo:

& lt; script src = "js / data.js" & gt; & lt; / script & gt;
& lt; script & gt;
var container = document.getElementbyID ('Ann_Container');
// imposta la nostra animazione
var animdata = {
Contenitore: contenitore,
Rendering: "svg",
AUTOPLAY: TRUE,
Loop: vero,
AnimationData: Data.
};;
var anim = bodymovin.loadanimation (animdata);
& lt; / script & gt; 

Aggiorna la pagina e la tua animazione dovrebbe giocare all'interno del contenitore. Seleziona con i tuoi strumenti Dev e vedrai che ogni elemento nell'animazione è ora contenuto in & lt; g & gt; Tag e viene trasformato in tempo reale.

Sembra sorprendente, giusto? Ora dovresti avere una bella e croccante animazione che mostra nel browser (senza un tag video miserabile in vista ...). L'animazione si ridurrà sempre per adattarsi al suo contenitore, quindi vai avanti e soffiarlo!

Bodymovin ha una gamma di metodi potenti per il controllo dell'animazione dopo averlo caricato. Chiamare un metodo come anim.pause () o anim.setdirection () ti consentirà di manipolare la riproduzione in modi diversi. Diamo un'occhiata ad alcuni esempi:

• anim.setdirection (-1) giocherà l'animazione al contrario
• anim.pause () e anim.play () inizierà e fermerà l'animazione
• anim.setspeed (0.5) giocherà l'animazione a metà velocità

Aggiungi interazione

In questo prossimo passo esplorerai alcuni dei diversi modi per aggiungere interazione alle tue animazioni attraverso JavaScript. In questo esempio esportiamo un'animazione After Effects con due sezioni: Sezione A e Sezione B. Sezione A utilizza i fotogrammi da uno a 20 (Triangolo sta tenendo la sua sezione Pogo Stick) B utilizza i telai da 20 a 40 (il triangolo sta saltando su e giù su un bastone di pogo).

Ora, si desidera riprodurre la sezione A su un ciclo quindi (solo dopo il clic dell'utente) PLAY e loop Sezione B. È possibile utilizzare la proprietà PlaySiGments per dividere le animazioni in questo modo. Questo metodo prenderà due argomenti: un array con valori di avvio e fine e un secondo booleano - è iscritto. L'impostazione di questo su True dirà all'animazione di leggere i valori di avvio e fine come fotogrammi, mentre il falso lo dirà di leggere questi valori del tempo.

 Ann.Pause ();
anim.playsegments ([0,20], true); 

L'aggiunta di questo dice a Bodymovin di mettere in pausa il primo frame e gioca solo l'animazione da 0 a 20 fotogrammi. Mentre imposta la tua animazione con a Loop: True. Proprietà Questo continuerà a giocare a Sezione A ancora e ancora.

Impostiamo l'intero esempio. Utilizzerai due segmenti di un'animazione per questo esempio, quindi creerai due funzioni:

 VAR container = document.getElementbyID ('Ann_Container');
// imposta la nostra animazione
var animdata = {
Contenitore: contenitore,
Rendering: "svg",
AutoPlay: falso,
Loop: vero,
Path: 'data.json'
};;
var anim = bodymovin.loadanimation (animdata);
// Quando l'animazione viene caricata eseguire la nostra funzione di primo grado
anim.addeventlantener ('Dombloaded', firstoop);
// Crea le nostre funzioni di riproduzione
funzione firstloop () {
anim.playsegments ([0,20], true);
};;
FUNCTION SECONDLOOP () {
anim.playsegments ([20,40], vero);
};;
// Ascolta per un evento Click
container.addeventListener ('click', funzione (evento) {
anim.addeventlistener ('loopcomplete', secondoOop);
}); 

Ben fatto! Ora la tua animazione terminerà looping fino a quando l'utente si fa clic su di esso, avvierà il secondo ciclo. L'unico problema ora è che un salto come questo è molto brusco e può rovinare la levigatezza dell'animazione.

Una situazione ideale è includere una terza sezione all'animazione, quella che transili da tenere il bastone Pogo per saltare su di esso. Ora la tua struttura sembrerà qualcosa del genere:

• firstoop. - Telaio da 0 a 20
• transizione - Telaio da 20 a 30
• secondoop. - Telaio da 30 a 50

Vogliamo che la tua animazione rimanga nel primo ciclo fino a quando non si fa clic. A quel punto vorrai aspettare la fine del ciclo che sei attualmente in entrata e passa sulla transizione. Dopo che la transizione viene eseguita spostarsi sul tuo secondo ciclo. Questo suona complicato ma rimani con me! Ecco il tuo codice per intero:

var container = document.getElementbyID ('Ann_Container');
// imposta la nostra animazione
var animdata = {
Contenitore: contenitore,
Rendering: "svg",
AutoPlay: falso,
Loop: vero,
Path: 'data.json'
};;
var anim = bodymovin.loadanimation (animdata);
// Quando l'animazione viene caricata eseguire la nostra funzione di primo grado
anim.addeventlantener ('Dombloaded', firstoop);
// Crea le nostre funzioni di riproduzione
funzione firstloop () {
anim.playsegments ([0,20], true);
};;
Transizione funzione () {
anim.playsegments ([20,30], vero);
anim.removeeventlislener ('loopcomplete');
anim.addeventlistener ('loopcomplete', secondoOop);
};;
FUNCTION SECONDLOOP () {
anim.playsegments ([30.100], vero);
anim.removeeventlislener ('loopcomplete');
};;
// Ascolta per un evento Click
container.addeventListener ('click', funzione (evento) {
anim.addeventlistener ('loopcomplete', transizione);
}); 

Sul clic, stai usando a LoopComplete. Ascoltatore d'attesa fino a raggiungere l'ultima cornice del ciclo, quindi esegui il tuo transizione() funzione. Qui rimuovi l'ultimo ascoltatore, gioca il prossimo set di fotogrammi e quindi fai di nuovo lo stesso. Dopo che la transizione è finita, chiamerà secondoOop () .

Questo è tutto!

Hai lavorato con alcune delle caratteristiche di Bodymovin oggi, ma se sei interessato a saperne di più sul plugin, puoi trovare un carico di informazioni sul Bodymovin GitHub. pagina. Per ulteriori esempi, dai un'occhiata alla sempre impressionante collezione Bodymovin Codepen.

Speriamo che questo tutorial ti abbia dato un'idea dei diversi tipi di modi in cui è possibile combinare l'uso di After Effects e Bodymovin per produrre una certa animazione supercool per il web!

Ora è possibile impostare l'animazione da esportare per il Web, portare i file esportati nel browser e rendere la tua animazione reattiva per fare clic. Pensa oltre i file MP4 che stavi utilizzando in precedenza e guardate a Bodymovin per creare esperienze web molto più ricche in futuro.

Essere in grado di coinvolgere gli animatori da vicino nel processo di sviluppo sta diventando sempre più importante, e il campo dell'animazione web si sta muovendo incredibilmente velocemente. Con una raccolta in continua crescita di nuove estensioni, plugin e framework, animatori e sviluppatori possono aspettarsi che questo processo diventassi più facile e migliore nel tempo. Non vedo l'ora di vedere cosa tiene il futuro.

Hai un sacco di file per eseguire il backup? Controlla il nostro deposito cloud. scelte.

Questo articolo è originariamente apparso in Magazine netta nel 2017. Iscriviti qui .

Per saperne di più:

• Crea e animare i poligoni SVG
• 14 Amazing Adobe. Plugin After Effects.
• Crea storyboard per animazioni web