Lottie animation slow android

Question

I'm using Airbnb's new library, Lottie to make an animation in my app.

The animation consists of a 70 kb JSON file and a 328 kb images folder. There's 13 small pngs in this folder.

Following the GitHub repo's indications, I declare my view like this

    <com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_fileName="animation.json"
    android:layout_gravity="bottom"
    app:lottie_loop="false"
    app:lottie_autoPlay="true"/>

and then, on the pertinent java class I call:

        mLottieView.setImageAssetsFolder("images");

However, I have a problem. The animation is clunky and slow and my memory usage jumps through the roof. It goes from 13 MB to 89, all of this happening on the main thread.

Could you tell me if there is a way to solve this?

Thanks

Answer 1

The documentation mentions a few items which affect performance

• If the composition has no masks or mattes then the performance and memory overhead should be quite good

• Png sequences are even worse than gifs (due to file sizes)

There are also some generic Android/mobile concerns to consider:

• With the width="match_parent", height="wrap_content" combination, the images will be scaled up. Use wrap, wrap or a fixed size.
• Alpha on PNGs adds additional overhead to processing

If your UI thread is doing too much work as you suggest, can you hold off on starting your animation? If that's an option then LottieComposition has static methods such as LottieComposition.fromJson().

You could manually set up your compositions on a background thread (and then optionally create a LottieDrawable and set the composition). Once that's finished you can switch to the UI thread and setComposition (or setImageDrawable) on the LottieAnimationView