search

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

Flare animation behaves weirdly with Flutter #25

Closed rohan20 closed 5 years ago

rohan20 commented 5 years ago

My Flare Project

This project consists of 2 animations, both of which work perfectly on Flare.

hbfinal1 placeholder hbfinal1

When I export the .flr file in my Flutter project, that's when the animations start behaving in a weird manner.

Weird Behaviour on Flutter

FlareActor(
        "assets/hummingbird.flr",
        alignment: Alignment.center,
        fit: BoxFit.fitHeight,
        animation: _animation,
      ),
luigi-rosso commented 5 years ago

This was a good catch. We were allocating the deform vertex buffer from the keyframe values instead of the original source. So the vertex buffer would always default to the last keyed one.

This should be fixed now and the package has been updated. Please give it a try!

P.S. if you're going to swap between these two animations at runtime, you'll probably want to make sure you set a key for the vertices of your rectangle which you animate in FlutterToHummingbird at the start of Placeholder. Flare doesn't automatically reset keyed values at runtime, so the last applied value from an animation will live on. This is a little misleading in the Flare editor, as it does do this for you when switching editing animation. It resets all the values to their setup values, but at runtime we spare the cycles and leave the artist/developer in control of this.

If you intend to only play Placeholder once and then switch to FlutterToHummingbird, then you don't need to key the path in Placeholder.

rohan20 commented 5 years ago

Thanks, @luigi-rosso. I understand the post-script and it made real sense. Even though I have upgraded the dependency [1.0.7] and added vertices keyframes for the disappearing rectangle, it somehow still persists the state of the previous animation. Could you please have a look at the project and check where I am wrong?

HB error 2

luigi-rosso commented 5 years ago

Sure! Would you mind sharing the source of your example project? It would be nice if we can work off of the same exact codebase. Let me know if not, I can setup a small example that I can share with you.

rohan20 commented 5 years ago

Sure, here it is: https://github.com/rohan20/hummingbird-animation/

luigi-rosso commented 5 years ago

Hi @rohan20! I took a look, and I think this is related to needing to make sure you key properties that you have changed in one animation in any animation you plan on playing after it.

Note how in Placeholder you key the rotation of this third (in your hierarchy) rectangle: screen shot 2018-12-28 at 3 09 48 pm

In FlutterToHummingbird you key other properties for that shape, but not rotation. screen shot 2018-12-28 at 3 09 34 pm

That means that if you play Placeholder, and then you play FlutterToHummingbird, the last rotation value applied to this Rectangle shape in Placeholder will live on and hold throughout FlutterToHummingbird. This is powerful because it allows mixing animations on top of each other, but if you intend for the properties to be reset to their setup values, you need to manually do it in the following animation. For example, in this case you'd probably just key the setup rotation of that rectangle at the start of FlutterToHummingbird.

We have plans for making this easier to detect using a system that allows you to preview mixing animations together.

rohan20 commented 5 years ago

Fixed! Thank you! I've learnt a lot of things over the course of trying to get this animation right. Works exactly the same on my Flutter project now 😄