Airbnb opens "Lottie" which makes it easy to install rich animation in an application

Travel platform AirbnbBut,Adobe After EffectsA library that renders animation in real time and makes it rich animation for iOS · Android · React Native "Lottie"Was developed.

Lottie
http://airbnb.design/lottie/

Lottie: Airbnb Design
http://airbnb.design/introducing-lottie/

Lottie is an open source animation creation tool. Normally when you implement animation in an application, you need to prepare a large amount of images to fit the screen size and write thousands of lines of code, but Lottie will automatically set the After Effects It will convert the animation into rich animation for the application. The libraryBodymovinIt is based on the JSON file output by the extension of After Effects called.


On Airbnb's blog, Lottie explains the animation contents of After Effects, automatically draws a bezel curve, etc. It explains that rich animation for the application is completed almost without doing anything. Lottie currently supports shapes, trim passes, dash patterns, masks, etc. Although the functions that are still supported are limited, Airbnb engineers aim to "support as many After Effects functions as possible", and as the application development progresses, the application will further evolve It's a schedule.


To use Lottie, firstBodymovinYou need to install. And after installing bodymovin, you can access the Lottie library for Android from the following.

GitHub - airbnb / lottie - android: Render After Effects animations natively on Android and iOS
https://github.com/airbnb/lottie-android

Lottie for iOS is from here.

GitHub - airbnb / lottie - ios: An iOS library to natively render After Effects vector animations
https://github.com/airbnb/lottie-ios

You can access Lottie for React Native from here.

GitHub - airbnb / lottie - react - native: Lottie wrapper for React Native.
https://github.com/airbnb/lottie-react-native