Flare-Flutter
Flare-Flutter copied to clipboard
FlareActor with transform is laggy
Hi
I'm having laggy animations when combining FlareActor with a Transform widget. I'm making a walking animation and works good but it's a little slow when a Transform.translation animation it's applied.
This is my widget (applied with a AnimationBuilder)
Transform.translate(
offset: Offset(animation.value, 0),
child: Container(
height: (MediaQuery.of(context).size.height) * 0.525,
child: FlareActor('assets/flare/character.flr',
alignment: Alignment.center,
animation: animation,
fit: BoxFit.fitHeight,
sizeFromArtboard: true),
),
)
Is it a bad thing combine flutter animations with flare? Is there a correct way to achieve this?
Thanks.
Hi @pblinux, I'm surprised there's a huge difference in performance. I haven't looked at how the Transform effect works under the hood, but it might be using an extra saveLayer operation, which could get expensive. Did you try it in profile/release to see if performance is as impacted there too?
Is it a very complex animation? Could you share the file?
Hi @luigi-rosso
Yes, I share a screen record of the animation that in fact is in release. https://streamable.com/hmmz8
As you can see, there are 2 animations: a walk and a idle animation. The idle animation works without troubles but applying the transform to the walk animation looks kind of laggy.
The character file: https://www.2dimensions.com/a/pixelagt/files/flare/juana
Maybe you are right about the performance using transform but I don't know right now another way to do the widget translation.
Thanks for the response.
Hi @luigi-rosso
I've been doing some testing, and I think this is related to #133
Disabling antiAlias make the animation really smooth and without losing quality (apparently). Works really good now, especially in release mode.
I think this is gonna be a new feature, right?
Meanwhile, disabling antiAlias in flare.dart it's a good way to fix this if anyone else is having issues with performance.