Flare-flutter: How to reverse the animation ?

[izzatzr]

I want it first display the animation and then do it in reverse, but i have no idea how to accomplish this

[luigi-rosso]

Hi @IzzatZR, one way you could do this right now is by using a custom controller which applies the animation in reverse.

For example, take a look at main.dart in the penguin example:
https://github.com/2d-inc/Flare-Flutter/blob/master/example/penguin_dance/lib/main.dart#L46

You could apply the "music_walk" animation (stored in the ActorAnimation _rock variable) in reverse by changing the apply call to use a _rockTime that is relative to the end of the animation. Something like this:

  bool advance(FlutterActorArtboard artboard, double elapsed) {
    _rockTime += elapsed * _speed;
    _rockTime = _rock.duration - (_rockTime % _rock.duration);
    _rock.apply(_rockTime, artboard, _rockAmount);
    return true;
  }

[agordeev]

It'd be great to have FlareController as easy to use as Flutter's AnimationController :(
Too much boilerplate to simply run the animation in reverse.

[tyirvine]

I ran into this problem as well @izzatzr. What I decided to do was just to make one animation for running forwards and one for running in reverse, which was super easy (just swap the start & and key frame positions in Rive).

Then I just used a bool to swap between the two

FlareActor(
        'assets/animations/animation.flr',
        animation: widget.animationSwitch ? 'forward' : 'reverse',
      ),

This isn't the best solution but it works!

¯\_(ツ)_/¯

[Tapaswi846580]

Is there any way to change the key frames pragmatically ?