Lottie Android Pie for Animation Lovers ❤
Eat a ‘Lotte’ pie, add an ‘i’ and do awesome animations!
Disclaimer: The purpose of this post is not to compare Lottie with Android’s native animations as they are great in their own way and have a different use case.
What is Lottie ? 🤔
Lottie is an open-source animation tool by the amazing folks at Airbnb which instills in us the superpower to create complex animations and compelling UI. It is a mobile library for Android, iOS and React Native that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! For the first time, designers can create and ship beautiful animations without an engineer painstakingly.
Inspired by communities like Squall, Keyframes, RubberHose, 9 Squares, Motion Corpse, Animography and Mobilo.
How it works ? 🤓
It’s easier than you think, almost magical!
- Go to Lottie GitHub page for reference.
- Create an Android Studio Project or clone LottieDemo.
- Add Lottie dependency to your gradle.
- Add the Adobe After Effects JSON file to your assets.
- Render animation in
LottieAnimationView.
Step by step, the thing is done ! 😎
A picture speaks louder than words, and a video even louder. So here is a compilation of 3 YouTube videos for non-designers/non-developers/both :P
1. Install BodyMovin Plugin in Adobe After Effects
2. Create an Animation and render it using BodyMovin
3. Create cool Animations in Android using Lottie
Why Lottie ? 😯
- Lottie comes as a cross platform tool and supports loading JSON files over the network, which is useful for A/B testing.
- It also has an optional caching mechanism, so frequently used animations, such as a wish-list heart, can load a cached copy each time.
- Lottie animations can be driven by gestures using the animated progress feature, and animation speed or scale can be manipulated by changing a simple value.
Epilogue 🤗
Despite certain issues, Lottie has come a long way with enhanced performance. My encounter with Lottie was love at first sight. I hope you like it too. There are a lot of out-of-the-box animations already available for developers at LottieFiles. You can check my presentation here. For further reference you can visit the following links:
- LottieDemo: https://github.com/chetdeva/LottieDemo
- LottieAndroid: https://github.com/airbnb/lottie-android
- Adobe AE: http://www.adobe.com/in/products/aftereffects.html
- BodyMovin: https://github.com/bodymovin/bodymovin
- LottieFiles: http://www.lottiefiles.com/
