search

xvrh / lottie-flutter

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.
https://pub.dev/packages/lottie
MIT License
1.17k stars 200 forks source link

Lottie JSON (logo animation) runs at 2.6 fps average using Flutter, while 45+ fps on native Android Lottie player. #110

Open UniRoomy opened 4 years ago

UniRoomy commented 4 years ago

My team are having major performance issues with this package.

We thought our logo reveal animation was not optimised but have recently tested it on native Android using Lottie's Android player, and the animation runs perfectly smoothly (45 fps+) on an old Oneplus X, whereas it runs at less than 3fps on the same device on a example Flutter app with no other packages.

The animation does run relatively smoothly (20fps) on a Flutter app using a very new and powerful Android device, but this surely isn't normal. The animation hits 60fps on this same device using the Android player without breaking a sweat.

You can see the difference in the screenshots provided as tested on the Oneplus X.

I am uploading the logo json too. Do note it is protected under copyright so please don't distribute it. You are welcome to test it on your side to see if you can achieve any better results using Lottie on Flutter.

First image is on a Flutter testing app for Lottie animations:

Screenshot_20201024-012106

Second image is on the Lottie player app for Android:

Screenshot_20201024-012305

Note the drastic difference in render time per frame.

Here's the logo json: https://cdn.uniroomy.co.uk/static/UniRoomy_LogoReveal_Short.json

TLDR: Very bad performance using Lottie on Flutter (3fps) vs Lottie on native Android (45 fps). Please help.

Thank you!

Sprechen commented 3 years ago

I've got a similar issue. I also noticed that with a reduced duration, the animation was smooth. I discovered the frameRate option, and using the following configuration:

...
frameRate: FrameRate(240),

the performance of animation drastically increased!

dsyrstad commented 3 years ago

@UniRoomy I would check your lottie file/art because even in the Android Lottie player you are not getting 60fps, and sometimes not even 30fps. Also, which version of lottie-flutter and flutter are you using? Using lottie pub package v0.7.0+1 and Flutter 1.22.5, I'm getting close to 30fps on a Pixel 4a. Here's a short video of my run:

https://user-images.githubusercontent.com/1719665/103709112-7bb39000-4f77-11eb-8dd3-4636b30cac8b.mp4

The artwork seems like it should be simple. However, I recently worked around some issues with Flutter rendering of my own lotties. These workarounds are in lottie v0.7.0+1.

If I render your animation at 33% of the screen height, it is much faster. I wonder if it might have something to do with the full background. Maybe if you didn't have a background it would be faster. There are also lots of good tips on this page: https://airbnb.io/lottie/#/after-effects?id=creating-lottie-animations.

WillowWisp commented 3 years ago

I've got a similar issue. I also noticed that with a reduced duration, the animation was smooth. I discovered the frameRate option, and using the following configuration:

...
frameRate: FrameRate(240),

the performance of animation drastically increased!

This works perfectly 🎉 (I use FrameRate.max tho) Default value is FrameRate.composition, which I believe is the frame rate of the .json file. So that might be the cause of the low frame rate issue.