Adobe After Effects & Bodymovin
Onlangs is Airbnb.design gekomen met Lottie. Deze package maakt het mogelijk in native iOS- en Android-apps gebruik te maken van Adobe After Effects animaties. Het biedt ook mogelijkheden deze animaties te gebruiken in React Native apps. Onlangs hebben wij besloten React Native te gaan gebruiken als algemene ontwikkelplatform voor apps. Afijn, 1 + 1 = 2. Kunnen we hier wat mee?
Een paar – door ons – weinig tot niet gebruikte tools komen voorbij, namelijk After Effects en Bodymovin.
Adobe After Effects gebruiken voor kleine animaties
Veel websites en apps maken tegenwoordig gebruik van geanimeerde objecten, icoontjes, teksten – waaronder bijvoorbeeld Google Doodles. Er zijn veel manieren om dit te maken, veel ervan behoorlijk tijdrovend. Ondanks dat After Effects behoorlijk complex en uitgebreid is, kunnen er alsnog redelijk gemakkelijk kleine animaties worden gemaakt. YouTube staat vol met goede filmpjes om je basiskennis After Effects een beetje op te krikken.
Bodymovin export naar JSON
Bodymovin is hetgeen wat de animaties uit After Effects moet laten werken in een browser of app. Deze slimme package bestaat eigenlijk uit twee delen:
- Een extensie voor Adobe After Effects die het mogelijk maakt een animatie te exporteren als JSON.
- Een javascript-library waarmee het mogelijk is de geëxporteerde JSON ‘werkend’ te maken in een browser.
De js-library maakt van de JSON een svg-afbeelding en zorgt ervoor dat de elementen in de svg gaan bewegen. Ondanks dat Bodymovin niet alle effecten en mogelijkheden van After Effects ondersteunt, werkt het erg goed! Het bewegend maken van elementen in een icoontje of logo werkt snel en soepel.
Mocht je zelf een JSON export willen testen, probeer ‘m in deze fiddle. Binnenkort in ieder geval maar ’ns een testje met Lottie in combinatie met React Native!