Exporteren na effect-animaties naar HTML5

Animatie op het web is hier om te blijven. Het is in alles van de subtiele bewegingen die helpen onze UI-ontwerp Tot leven, om volledig geanimeerde canvaservaringen en WebGL-experimenten die uitdagen wat we eens dachten dat het mogelijk was in de browser.

Terwijl de creativiteit van Devs en de mogelijkheden van browsers toenemen, is animatie op het web al lang een slechte relatie met video - iets dat de Motion Graphics Community jarenlang voorzichtig is benaderd. Vergeet niet dat als je een complexe site hebt om te onderhouden, jouw web hosting Service moet op punt staan.

• De Pros Guide to UI Design

Ontwikkelaars hebben zich gebaseerd op bibliotheken zoals GreenSock en Snap.SVG om het zware tillen in reproducerende animatie via JavaScript te doen. Hoewel deze tools veel flexibiliteit hebben gegeven, kunnen ze niet vergelijken met de precisie en subtiliteit van animatie die kan worden bereikt met behulp van Na Effects CC 's eigen tijdlijn en versoepelingsgrafieken. Vanuit een webperspectief is na effecten zeer geschikt om te tweaken en de beweging uit te proberen voordat deze op code plaatst.

Invoeren Bodymovin , een baanbrekende extensie voor Adobe After Effects die de animatie rechtstreeks exporteert van After Effects naar Javascript die wordt getoond en gemanipuleerd in de browser. Gemaakt door Hernan torrisi Bodymovin verwijdert veel van de barrières tussen animator en ontwikkelaar. Op basis van het basisniveau werkt de plug-in als het magische 'render voor web' Feature Adobe vergeten. Op zijn meest geavanceerde opent het nieuwe mogelijkheden voor interactieve animatie.

BodyMovin is een link in de keten van tools, plug-ins en systemen die stijgen om aan sommige van deze nieuwe mogelijkheden te voldoen. Lotie van Airbnb en Facebook's keyframes Beide bouwen op deze fundamenten - en ze brengen eindelijk de krachtigste animatietool naar het web.

Waarom bodymovin gebruiken?

SVG heeft het internet overgenomen en daarmee de verwachting gebracht dat alles van hoge kwaliteit, licht en schaalbaar moet zijn. BodyMovin maakt alles in uw compositie naar prachtig frisse SVG die zijn vectorkwaliteit op elke maat houdt. Niet meer compromitteren om die GIF op te lichten of uw gebruikers te forceren om opgeblazen videobestanden te laden.

Naast het vereenvoudigen van het proces van het exporteren van uw animaties, opent BodyMovin veel meer potentieel voor ontwikkelaars om creatief te worden met nieuwe interactieve ervaringen. Bekijk Codepen voor enkele van de fantastische manieren waarop de extensie is gebruikt - van interactieve IK-rigs tot animate-as-you-type interactieve tekst.

Als u uw Web Dev-proces verder kunt vereenvoudigen, probeert u een website bouwer ​

Geëxporteerde animatie kan in de browser worden gemanipuleerd zoals elk ander element, waardoor we kunnen denken aan animatie als een interactieve en experimentele tool binnen het webdesign. En nu vanwege BodyMovin, is het gemakkelijker eenvoudig geweest van uw animaties naar het web. In deze tutorial leert u hoe u een animatie van After Effects kunt exporteren en een eenvoudige looping-animatie kunt maken die op de klik van de gebruiker reageert.

Hoe u uw bewerkingsbestanden voor te bereiden

Ondersteuning voor After Effects-functies is sterk verbeterd en u kunt verwachten vrij goede resultaten recht uit de doos te krijgen. Dat gezegd hebbende, zullen je mooie vliegende 3D-lagen niet leuk spelen, dus wees je bewust van de limieten voordat je aan de slag gaat. Voordat u een project begint, downloadt u altijd de nieuwste versie van BodyMovin en vink de GitHub-pagina aan om te zien welke functies momenteel worden ondersteund.

Wees niet te haastig om naar het leuke gedeelte te gaan ... Tidy-bestanden maken een nette geest. In dit geval helpen ze ook een deel van het extra werk uit de buurt van de browser en geef je zijdezachte afspelen. Ten eerste wilt u ervoor zorgen dat uw inhoud zich bevindt na de vorm van de effecten voor volledige vectorkracht. Om een ​​illustratorbestand te converteren om lagen te vormen, kunt u eenvoudig met de rechtermuisknop klikken en kiezen van vormen van vectorlaag maken. Alle lagen die in dit stadium niet zijn, worden vervolgens omgezet in afbeeldingen en ze worden niet weergegeven als vectoren.

Neem vervolgens een cheque via uw lagen en sublagen; Er is een goede kans dat je de inhoud van de vorm kunt vereenvoudigen zonder iets op te offeren. Probeer het aantal groepen, paden en vulling te verminderen tot alleen de blote essentials.

Pas op met maskers

Maskers zijn een eenvoudige manier om in dit stadium omhoog te gaan. Houd er rekening mee dat alfa-maskers met de SVG-renderer werken, maar niet opdagen als u ervoor kiest om over te schakelen naar Canvas. Maskers kunnen duur zijn in de prestaties, dus gebruik ze ze efficiënt.

Rendering

Bodymovin werkt in twee delen - een extensie na effecten die animatiegegevens converteert naar een JSON-bestand en een bodymovin.js-speler om in uw webpagina op te nemen die dit bestand kan interpreteren en deze in de browser kunnen renderen.

Denk je dat je bestanden goed zijn om te gaan? Open de bodymovin-extensie via venster & GT; Extensies en vervolgens bodymovin.

Nadat u opneemt, ziet u een lijst met alle composities in dit na effectproject. Selecteer de door u gekozen Comp en kies vervolgens een doelmap in uw webproject. Als je gelukkig bent, klik je gewoon op renderen en kijk hoe de magie gebeuren. Als het klaar is, krijg je een 'afgewerkt' bericht. Gefeliciteerd! U hebt zojuist een JSON-bestand geëxporteerd met alle informatie die de speler nodig heeft om de animatie opnieuw te maken.

Om uw nieuw geëxporteerde animatie te testen, klikt u op Preview & GT; Huidige renders en vergeet niet om door de tijdlijn te schrobben omdat je iets zou kunnen zien dat een beetje anders lijkt op wat je zou verwachten. Als u problemen ondervindt, spring dan terug en controleer uw lagen - het kan een niet-ondersteunde functie zijn of een uitdrukking die wordt gebruikt in nawerkingen.

Sommige effecten-plug-ins, zoals rubberhose ondersteunen nu bodymovin. Rubberhose maakt gebruik van geleidingslagen en verborgen lagen. Om deze te activeren, klikt u gewoon op de instellingen COG naast de door u gekozen compositie en vinkt u de functies aan die u nodig hebt.

Als alles er goed uitziet, is er nog maar één ding dat u moet doen voordat u na de effecten achterlaat. In dit stadium moet u een Fresh Data.json-bestand beschrijven dat uw animatie beschrijft, maar geen bodymovin-speler om het te interpreteren. Klik in de extensie op de knop 'Player' in de rechterbovenhoek en sla deze op met uw JSON-bestand.

Laad de animatie

Nu heb je alles wat je nodig hebt, laten we meteen in de code springen en de basis leggen om je animatie op de pagina te laten zien.

Maak eerst een nieuwe container #anim_container om je animatie vast te houden. U moet ook de bodymovin.js bestand vóór het slotlichaam tag. Vertel het bodymovin alles over je animatie en laad het in de nieuwe container.

Laten we stap voor stap door de setup lopen:

 Var container = document.getelementByID ('anim_container');
// stel onze animatie in

var animdata = {
Container: container,
renderer: 'svg',
Autoplay: TRUE,
Loop: TRUE,
Pad: 'data.json'
​
Var Anim = bodymovin.loadanimatie (animdata); 

U moet alle parameters voor de animatie definiëren. Vertel Bodymovin de container die u wilt dat de animatie in laadt en vertel het dan om de animatie als SVG-elementen te maken. Vertel vervolgens de animatie om te spelen zodra het is geladen en dat je wilt dat het terugloopt naar het begin wanneer het klaar is.

Het pad Property vertelt de bodymovin-speler waar u het JSON-gegevensbestand voor de animatie kunt vinden. Vanwege het Cross-Origin Resource Sharing Policy (CORS), werkt de techniek die u gebruikt voor het openen van het JSON-bestand alleen als u op een server of lokale server bent. Om lokaal te werken, kunt u dat gegevens maken.json in een JavaScript-bestand dat het object aan een variabele toewijst. In dat geval kan uw setup er als volgt uitzien:

& LT; Script SRC = "JS / DATA.JS" & GT; & LT; / SCRIPT & GT;
& lt; script & gt;
Var container = document.getelementByID ('anim_container');
// stel onze animatie in
var animdata = {
Container: container,
renderer: 'svg',
Autoplay: TRUE,
Loop: TRUE,
AnimationData: Gegevens
​
Var Anim = bodymovin.loadanimatie (animdata);
& LT; / Script & GT; 

Vernieuw de pagina en uw animatie moet in de container spelen. Selecteer met uw Dev-gereedschap en u zult zien dat elk element in de animatie nu is ingesloten & LT; G & GT; Tags, en wordt in realtime getransformeerd.

Ziet er geweldig uit, toch? Je zou nu een mooie, frisse animatie moeten hebben die in de browser wordt weergegeven (zonder een ellendige videotag in zicht ...). De animatie zal altijd schalen om zijn container te passen, dus ga je gang en blaas het op!

BodyMovin heeft een reeks krachtige methoden voor het besturen van de animatie nadat het is geladen. Een methode noemen anim.pause () of anim.SetDirection () stelt u in staat om het afspelen op verschillende manieren te manipuleren. Laten we eens kijken naar enkele voorbeelden:

• anim.SetDirection (-1) zal de animatie achteruit spelen
• anim.pause () en anim.play () zal beginnen en de animatie stoppen
• Anim.SetSpeed ​​(0.5) zal de animatie op halve snelheid spelen

Voeg interactie toe

In deze volgende stap verken je een paar van de verschillende manieren om interactie aan je animaties toe te voegen via JavaScript. In dit voorbeeld exporteren we een animatie van effecten met twee secties: sectie A en sectie B. Sectie A Gebruikt frames van één tot 20 (Triangle houdt zijn POGO-stick) Sectie B gebruikt frames van 20 tot 40 (Triangle springt op en neer op een pogo-stick).

Nu wilt u sectie A op een lus afspelen (alleen na de gebruiker klikken) afspelen en lussectie B. U kunt gebruik maken van de eigenschap PlayseSegments om op deze manier animaties op te splitsen. Deze methode kost twee argumenten - een array met start- en eindwaarden en een tweede boolean - isframe. Het instellen van dit op True zal de animatie vertellen om de start- en eindwaarden als frames te lezen, terwijl onwaar het zal vertellen om deze waarden te lezen als de tijd.

 anim.pause ();
Anim.Playsegments (0,20], TRUE); 

Het toevoegen van dit vertelt bodymovin om te pauzeren in het eerste frame en speel gewoon de animatie van 0 tot 20 frames. Terwijl je je animatie opzet met een Loop: TRUE EIGENDOM Dit zal doorgaan met het afspelen van sectie A en nogmaals.

Laten we het hele voorbeeld opzetten. U zult twee segmenten van een animatie voor dit voorbeeld gebruiken, zodat u twee functies maakt:

 Var container = document.getelementByID ('anim_container');
// stel onze animatie in
var animdata = {
Container: container,
renderer: 'svg',
Autoplay: false,
Loop: TRUE,
Pad: 'data.json'
​
Var Anim = bodymovin.loadanimatie (animdata);
// Wanneer de animatie wordt geladen, voert onze FirstLoop-functie uit
anim.AddeventListener ('Domloaded', FirstLoop);
// Maak onze afspeelfuncties
Functie FirstLoop () {
anim.Playsegments ([0,20], waar);
​
Functie Secondloop () {
anim.Playsegments ([20,40], waar);
​
// Luister naar een klik-evenement
container.AddEventListener ('klik', functie (evenement) {
anim.AddeventListener ('loopcomplete', secundoop);
}); 

Goed gedaan! Nu blijft uw animatie lussen totdat de gebruiker erop klikt, dan start het de tweede lus. Het enige probleem is nu dat een sprong zo erg abrupt is en het de gladheid van de animatie kan verpesten.

Een ideale situatie is om een ​​derde deel aan de animatie op te nemen, een die overgaat van het vasthouden van de Pogo-stick om erop te springen. Nu ziet je structuur er zoiets uit:

• firstreep - Frame 0 tot 20
• overgang - Frame 20 tot 30
• secunda - Frame 30 tot 50

We willen dat je animatie in de eerste lus blijft totdat erop is geklikt. Op dat moment wil je wachten tot het einde van de lus waar je momenteel in bent en ga naar de overgang. Nadat de overgang is gedaan, ga dan naar uw tweede lus. Dit klinkt ingewikkeld maar blijf bij me! Hier is uw code volledig:

 Var container = document.getelementByID ('anim_container');
// stel onze animatie in
var animdata = {
Container: container,
renderer: 'svg',
Autoplay: false,
Loop: TRUE,
Pad: 'data.json'
​
Var Anim = bodymovin.loadanimatie (animdata);
// Wanneer de animatie wordt geladen, voert onze FirstLoop-functie uit
anim.AddeventListener ('Domloaded', FirstLoop);
// Maak onze afspeelfuncties
Functie FirstLoop () {
anim.Playsegments (0,20], waar);
​
Functietransitie () {
Anim.Playsegments ([20.30], TRUE);
anim.removeefeListener ('loopcomplete');
anim.AddeventListener ('loopcomplete', secundoop);
​
Functie Secondloop () {
anim.Playsegments ([30.100], waar);
anim.removeefeListener ('loopcomplete');
​
// Luister naar een klik-evenement
container.AddEventListener ('klik', functie (evenement) {
anim.AddeventListener ('loopcomplete', transitie);
}); 

Op klik, gebruik je een loopcomplete luisteraar om te wachten tot je het laatste frame van de lus bereikt, voer dan je uit overgang() functie. Hier verwijdert u de laatste luisteraar, speel de volgende set frames en doet het opnieuw hetzelfde. Nadat de overgang is voltooid, belt het Secondloop () ​

Dat is het!

Je hebt vandaag met een paar van de kenmerken van bodymovin gewerkt, maar als je geïnteresseerd bent in het leren van meer over de plug-in, kun je een lading informatie vinden over de Bodymovin github bladzijde. Bekijk voor meer voorbeelden de Ever-Impressive BodyMovin Codepen-collectie.

Hopelijk heeft deze tutorial je een idee gegeven van de verschillende soorten manieren die je het gebruik van na effecten en bodymovin kunt combineren om wat Supercool-animatie voor het web te produceren!

U kunt nu animatie instellen die voor het web wordt geëxporteerd, uw geëxporteerde bestanden naar de browser inbrengen en uw animatie reageren op klikken. Denk na voorbij de MP4-bestanden die u eerder gebruikte en keek naar BodyMovin voor het creëren van veel richer-webervaringen in de toekomst.

In staat zijn om animators nauw in het ontwikkelingsproces te betrekken, wordt steeds belangrijker en het veld van webanimatie bewegen ongelooflijk snel. Met een steeds groeiende verzameling van nieuwe extensies, plug-ins en frameworks, kunnen animators en ontwikkelaars verwachten dat dit proces gemakkelijker en beter kan worden. Ik kan niet wachten om te zien wat de toekomst vasthoudt.

Heb je veel bestanden om een ​​back-up te maken? Bekijk onze cloud opslag picks.

Dit artikel verscheen oorspronkelijk in netto tijdschrift in 2017. Abonneer hier ​

Lees verder:

• Maak en animeer SVG-polygonen
• 14 Verbazingwekkende Adobe After Effects-plug-ins
• Maak storyboards voor webanimaties