Lottie 3.4.0 now available, with significant performance improvements thanks to a new rendering engine powered by Core Animation

[calda]

Lottie 3.4.0 is now available! This release adds a new rendering engine that uses Core Animation instead of animating on the main thread. This significantly improves animation performance while also eliminating CPU overhead.

Lottie’s original rendering engine played its animations on the app’s main thread. Once per frame, Lottie advanced the progress of the animation and re-rendered 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 application.
• Animations would not update when the main thread was busy, which could cause animations to drop frames or freeze entirely.

Playing a Lottie animation with the original Main Thread rendering engine

Lottie 3.4.0 includes a new rendering engine that addresses these issues and significantly improves performance. The new engine leverages Core Animation to render out-of-process with GPU hardware acceleration. Once animations begin playing, they do not consume any of the app’s CPU resources, and are effectively guaranteed to animate smoothly regardless of CPU load:

Playing a Lottie animation with the new Core Animation rendering engine

In Lottie 3.4.0, the new Core Animation rendering engine is opt-in, configured by a feature flag (LottieConfiguration.renderingEngine). In a future major version of Lottie, we plan on enabling the new rendering engine by default.

Due to limitations of Core Animation, not all Lottie animation features are supported by the new rendering engine. Lottie includes a RenderingEngineOption.automatic option, which detects if an animation can be played correctly using the new rendering engine and otherwise falls back to the legacy main thread rendering engine. In most cases, enabling RenderingEngineOption.automatic should not result in any user-facing behavior changes other than improved performance.

You can enable the new Core Animation rendering engine globally in your app, by configuring the LottieConfiguration.shared singleton:

// Use the Core Animation rendering engine if possible,
// otherwise fall back to using the Main Thread rendering engine.
//  - Call this early in your app lifecycle, such as in the AppDelegate.
LottieConfiguration.shared.renderingEngine = .automatic

or you can enable the new Core Animation rendering engine for an individual AnimationView:

let animationView = AnimationView(
  animation: ...,
  configuration: LottieConfiguration(renderingEngine: .automatic))

Please try out the new Core Animation rendering engine, and let us know how it goes!

If you enable RenderingEngineOption.automatic and find that your animation no longer renders correctly, please file an issue with your animation json. Ideally all animations will render correctly using RenderingEngineOption.automatic .In a future major version of Lottie we’d like to make this the default behavior, so nailing the automatic compatibility detection will be especially important.

There are some advanced AnimationView features and methods that are currently not supported by the Core Animation rendering engine (such as some types of advanced value providers, and some operations that rely on animation key paths). If you actively use these methods and would like to adopt the Core Animation rendering engine, please file an issue with your use case. Pull requests are welcome as well (and much appreciated)! Feel free to reach out if you’d like tips on how to get started.

3.4.0 includes several other new features and lots of bug fixes. You can find a full changelog here.

[tr736-reclip]

Wow this is HUGE!! very very well done!

[jwh-hutchison]

Great! when can we download it? I've tried updating it today but that version is not showing up on NPM yet, and when I try to download the package using the git target in my package.json it can only find 3.3.0.

[jwh-hutchison]

Nevermind, it looks like 3.4.0 is available but it was still recognized as 3.3.0, I noticed that that podspec version was updated to 3.4.0 in a commit after the release was published so I'm guessing it has something to do with that!

[calda]

If you're using npm, I just uploaded 3.4.0 to the npm registry: https://www.npmjs.com/package/lottie-ios

[jwh-hutchison]

Awesome, thanks!

[centralmotion]

Nice work! What features are supported with the Core Animation in this release? Thank you!

[calda]

The Core Animation engine support all layer types supported by the Main Thread engine, and most animation features. Some notable features that are currently unsupported include:

• time remapping (we have a partial implementation of this but it doesn't work in all cases 😅)
• animations with mixed isHold / !isHold keyframes (implemented in Add support for mixed isHold / !isHold keyframes #1644)
• text layer animations (the CA engine only supports static text at the moment)
• most types of custom ValueProviders aren't implemented yet (the CA engine currently only supports color value providers)

[roshanman]

Greate job.

[tfmart]

Awesome update! I've just added support for this new rendering engine on my LottieUI package and I'm seeing great usage reduction on the CPU. Great job! 👏

[calda]

awesome, love to see it!

[jfbuehler]

@calda Just wanna say thank you for all your hard work! Version 3.4.2 specifically is great. I noticed a significant render upgrade on complicated JSON typeface animations. Note a bunch of the little details improved. I have been exploring the full Mobilo typeface as part of an app I made and it's exciting to see it start rendering better.
Sadly I don't see a huge improvement in performace on the new render engine, and a bunch of the letters forcibly fallback (probably why no performance gain), but that's ok! Maybe in the future 😄

Before (v3.4.1)

After (v3.4.2)

[jorgealegre]

Thank you very much for the hard work, always love to see work towards performance. My current animation is not rendering with CA and is falling back to main thread and I'm getting This animation cannot be rendered correctly by the Core Animation engine in the console. What can I do to have the animation use the new engine?

[jorgealegre]

Thanks for the quick reply!
The log is pretty long but there are duplicates, but I mostly see these 2 things:

Lottie/AnimationView.swift:1046: Assertion failed: Encountered Core Animation compatibility issues while setting up animation:
[shimmering orb rotating -withBlueInFront 4.gradient- vertical flowdown.Gradient Fill 1] The Core Animation rendering engine does not support animating multiple keyframes for gradient startPoint values (due to limitations of Core Animation `CAKeyframeAnimation`s).
[shimmering orb rotating -withBlueInFront 4.mask-flowdown dup.Gradient Fill 1] The Core Animation rendering engine does not support animating multiple keyframes for gradient startPoint values (due to limitations of Core Animation `CAKeyframeAnimation`s).

[jorgealegre]

If I override the logger and ignore the assertions, the animation looks fina and I still see about 10-15% less CPU usage so it seems to be working. But I'd like to not see errors in the log so what can I tell the designer in my team who made that animation? Is that something they can change on the design implementation and have them send me a new lottie file that doesn't use those 2 features?

[calda]

This seems like something we should be able to add support for without much trouble, which would get rid of the log messages. Could you file an issue and share a copy of your animation json?

[jorgealegre]

Yes, for sure, and thank you so much for looking into this

[jorgealegre]

There you go: #1762

[calda]

Starting in today's Lottie 4.0 release, the new Core Animation rendering engine is now enabled by default for supported animations: #1832. You can learn more about the Lottie 4.0 release in this post on the Airbnb Tech Blog: Announcing Lottie 4.0 for iOS

[jorgealegre]

Nice!