Open UniRoomy opened 4 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!
@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.
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.
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:
Second image is on the Lottie player app for Android:
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!