Q: How to play OneShotAnimations in reverse with new rive

Question

I have an app where I have an animated check mark made in rive. It is a one shot animation and I want to play it and have it stay in the end of the animation once it's done and then also be able to reverse it when the user clicks on it again. I tried using a SimpleAnimation but I also wasn't able to achieve what I want but it did stay after the animation was done. I don't, however, know how to play an animation and then reverse it or play another animation.

The check mark looks something like this: https://cln.sh/MwLFNs

They are two separate animations but they are copy pasted but in reverse so I can use either one or both.

What I need is to have the animation play and then when the user clicks on the check, I want the animation to change to another one which would then play. How can I achieve this?

Thanks for the help!

For anyone wondering, I used Lottie instead. I made the animation in after effects and then used lottie as it allows me to play the animation in reverse. — , Oct 19 '21 at 10:40

score 1 · Accepted Answer · answered Dec 11 '21 at 02:12

you can use State machines, get the state and decide what to do when you want

// Getting state machine
  void _onRiveInit(Artboard artboard) async {
    final controller =
        StateMachineController.fromArtboard(artboard, 'State Machine 1');

    if (controller != null) {
      artboard.addController(controller);
      _lick = controller.findInput<bool>('Lick') as SMITrigger;
    }
  }

  void _onHandlerStateMachine() => _lick?.value = !_lick!.value;

_onRiveInit is a function that is fired when the Rive file is being loading, after you get the controller to the state machine to modify his state (This is important the name of the State Machine has to be the same of the animation State machine name) and to modified the value of the trigger your must get the reference on this way

_lick = controller.findInput('Lick') as SMITrigger;

then you can use

void _onHandlerStateMachine() => _lick?.value = !_lick!.value;

to put or remove the animation on any time, also you can have more than one trigger. If your need that your animation do something and after a time do something else you can use a debouncer function

_debouncer.run(() {
      _onHandlerStateMachine()
    });

**Remember update the view if are using state management

when the rive file is load

// Loads a Rive file
  Future<void> _loadRiveFile() async {
    final bytes = await rootBundle.load(riveFileName);
    RiveFile rFile = RiveFile.import(bytes);

    final artboard = rFile.mainArtboard;
    _onRiveInit(artboard);

    globalArtboard = artboard
      ..addController(
        _animationController = SimpleAnimation('idle'),
      );    
  }

Here I have and example of a Rive animation of Teddy, using Flutter with provider https://github.com/alcampospalacios/flutter-rive-animations

Thanks for the help. I realised I could use state machines but had already just fixed the problem by using Lottie since it was a simple animation. I remade the animation in after effects and exported it using Lottie. — , Dec 11 '21 at 15:36

Q: How to play OneShotAnimations in reverse with new rive

1 Answers1