BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News AirBnb Animation Engine Lottie Improves Performance by Adopting Core Animation

AirBnb Animation Engine Lottie Improves Performance by Adopting Core Animation

Bookmarks

AirBnb has announced the fourth major iteration of its open-source vector-based animation engine Lottie. Thanks to the adoption of Core Animation, Lottie 4.0 provides significant performance improvements and reduces CPU load, says AirBnb iOS engineer Cal Stephens.

Lottie is a library for iOS and Android that renders After Effects animations in real time. Animations in Lottie are described through JSON files that can be exported from After Effects using the Bodymovin plugin. Lottie will decode the JSON and access all required resources to render the animation as if it were just another static resource in the app.

In Lottie 4.0, AirBnb dropped their original approach to animating graphics on the main CPU thread using a CADisplayLink:

Once per frame, Lottie would execute code on the main thread to advance the progress of the animation and re-render its content. This meant that animations would consume 5–20%+ of the CPU while playing, leaving fewer CPU cycles available for the rest of the app.

According to Stephens, this made it relatively common for Lottie to not be able to sustain the desired frame rate and start dropping frames in more complex cases. Additionally, animations could show some jittering when the main thread got busy with some expensive task.

Switching to Core Animation means that animations are offloaded to the GPU, which has three benefits: leveraging hardware acceleration, reduce CPU load, and improved frame rate when the CPU is busy.

As an example, the Airbnb app displays a Lottie animation when starting up for the first time. We ran an experiment here and found that switching to the new rendering engine reduces our app’s total launch time, while also improving the frame-rate and UX of the startup animation.

Besides its new Core Animation-based rendering engine, Lottie 4.0 also brings a new file format which uses compression to aggregate one or more Lottie JSON files and their associated resources into a single file. The JSON-decoding pipeline has been rewritten with a ~2x speedup.

Originally written in Objective-C, Lottie was entirely rewritten in Swift two years ago leading to the release of version 3. You can install it from its GitHub repo or using a package manager, such as CocoaPods, Carthage, or the Swift Package Manager.

About the Author

Rate this Article

Adoption
Style

BT