2d-inc / Flare-Flutter

Load and get full control of your Rive files in a Flutter project using this library.
https://rive.app/
MIT License
2.55k stars 469 forks source link

FlareActor with transform is laggy #195

Open pblinux opened 4 years ago

pblinux commented 4 years ago

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.

luigi-rosso commented 4 years ago

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?

pblinux commented 4 years ago

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.

pblinux commented 4 years ago

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.