flutterflare

Flare/Flutter: How to reset the progress of an animation before starting it?

I have a Flare file with 3 animations contained within it, all in the same artboard. I understand that when switching between animations, Flare will mix the animations together by default, and that playing one animation will not reset the relevant nodes values back to what they were on frame 0 in the editor. That is the behavior I would like to achieve: when playing a new animation, I would like the previous animation to stop completely (don't mix them at all) and for the incoming animation to start at the very beginning with all its default values.

The use case is this:

  1. Play an animation where, say, the opacity of a shape goes down to zero
  2. Play a different animation that uses the shape from above, but in the Flare editor its opacity is 1 at the start of the animation

Desired result: the new animation resets the opacity of the shape and then begins and plays like normal

Actual result: since the previous animation changed the shape's opacity, the new animation will use the shape how it is instead of how it was created in the editor

For my question as explained on GitHub you can look at the end of the thread on this issue (has gifs): https://github.com/2d-inc/Flare-Flutter/issues/14

In the above thread, Luigi Rosso mentions "re-instancing" the artboard. Does anyone know what he means by this and how to do it? I have tried several methods of doing this such as the makeInstance methods found on classes such as FlutterActorArtboard, ActorNode and some others (there are a few variants of the makeInstance method but they are all similarly named and return a new artboard. However, I had no luck with replacing the current instance of my artboard in a FlareController implementation so far.

I have also tried to manually loop through all of the ActorNodes of the artboard and first saving their initial values and then copying the saved values to the artboard every time a new animation is played, but this seemed to break things pretty badly (the animation was unrecognizable and just didn't play correctly after that, so I must have done something wrong. Or I'm resetting the wrong values).

Any help is appreciated, thanks!

Solution

  • For playing a different animation on a shape and resetting its opacity, you can access the opacity of the node at runtime with: 

    ActorNode myNode = _artboard.getNode("nodeString");
myNode.opacity = 0.00;

    As outlined here in the manual.

    More simply, in the new animation, you can set a keyframe in the Rive/Flare editor for the opacity to be 1 at the start of the new animation, so that when it plays the animation from the beginning its opacity will be reset to 1.

    For playing one animation, then overriding it completely when the next animation plays you can extend the FlareController and create a custom animation controller to do this in the advance method. Here's a quick and dirty example (not best practices) to give you an idea of using advance: https://gist.github.com/she-who-codes/85d8f0da97abfc3ecc43b1cb470e9c29 https://gist.github.com/she-who-codes/ce633204cd2d4babfe9a5b54e34ca63d