Flare animation behaves weirdly with Flutter

[rohan20]

My Flare Project

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

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

FlareActor(
        "assets/hummingbird.flr",
        alignment: Alignment.center,
        fit: BoxFit.fitHeight,
        animation: _animation,
      ),

[luigi-rosso]

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]

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?

[luigi-rosso]

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]

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

[luigi-rosso]

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:

In FlutterToHummingbird you key other properties for that shape, but not rotation.

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]

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 😄