Rive: An Introduction for Beginners and Integration Guide for Flutter Apps

Rive

I recently tried Rive and thought it was cool and intuitive. In this article, I will explain the key terms needed to understand Rive and how to use it in your Flutter app as a developer and give some code snippets.

Rive is a real-time interactive design tool to create and animate vector graphics. It is handy for developing interactive animations for user interfaces, games, and other digital applications. It stands out for its ability to create real-time animations that respond to user inputs.

Key features of Rive

1. Real-time interactivity: Rive allows designers to create real-time animations that respond to user inputs. This makes it ideal for interactive user interfaces where elements must move, change, or animate dynamically based on user actions.
2. Vector Graphics: Rive supports vector graphics, allowing for the import of various file formats like Lottie and PNG
3. Cross Platform: Animations created in Rive can be exported and used across various platforms, including mobile, web, and desktop applications.
4. State Machines: Rive allows designers to create complex interactions by using state machines

Key Terms for Using Rive

1. Artboard: The canvas or workspace to create and organize your animations. It contains all the elements and animations for a project.
2. State Machines: System to define interactions between animations based on the different states and transitions.
3. Inputs: Variable within the state machine to control the state and behaviors of the state machine.
4. Triggers: Input used to initiate transition between two states.
5. States: State is the timeline animation that can play anywhere in your state machine. There are default states, entry states, exit states, any state, animation states, and blend states.
6. Transitions: They supply the logical map for the state machine to follow. It guides the state machine from one state to another.
7. Listeners: Listeners allow developers to define click, hover, and mouse move actions that can change inputs in the editor.
8. Events: Events are ways to send a signal to your code from rive.
9. Text Runs: To manipulate the text within the rive.

Rive For Flutter

To use rive in a flutter. You can use the rive package.

Load and Display a Rive Animation

You can use rive in your app by:

Asset:

RiveAnimation.asset('assets/guitar.riv');

Network

RiveAnimation.network(
  'https://cdn.rive.app/animations/vehicles.riv',
)

Relative Path:

RiveAnimation.file('path/to/local/file.riv')

Direct:

//To use the same instance of rive file in multiple places
final riveFile = await RiveFile.asset('assets/truck.riv');
RiveAnimation.direct(riveFile)

Control Animations with State Machines:

To use a state machine controller.
To control rive state machines and animation you must add a controller to it.
You can assign it after it has been initialized as :

RiveAnimation.asset('assets/guitar.riv',
                      artboard: 'New Artboard',//Name of the artboard to use
//when there are multiple artboard
                      onInit: _onRiveInit);  //onInit called after 
//Rive has been initialized

//...
Artboard? _artboard;
late StateMachineController controller;


void _onRiveInit(Artboard artboard) {
    _artboard = artboard;
    controller =
        StateMachineController.fromArtboard(_artboard!, 'State Machine 1');
     //'State Machine 1' name of the state machine.
    _artboard!.addController(controller);//Adding controller to artboard
  }

StateMachineController to control state machine.
RiveAnimationController to control animation.

To use an animation controller.

Define animation controller:

RiveAnimationController animationController =
      SimpleAnimation('movement_on', autoplay: false);

Add to artboard

_artboard!.addController(animationController);

Play/pause animation:

animationController.isActive = true; //To play
animationController.isActive = false;  //To pause

For one-time animation, you will need to reset it by (animationCOntroller as OneShotANimation).reset();to play it again after it has finished animating.

To listen to the animation state change:

animationController.isActiveChanged.addListener(() {
      log('isActive: ${animationController.isActive}');
  });

Inputs/Trigger to the control animation

Inputs or triggers can be used to change the state of the rive. We can change the input or fire the trigger as:

//There are three types of input that can be given.
controller!.getBoolInput('G')?.value = true;
controller!.getNumberInput('G')?.value = 22;
controller!.getTriggerInput('G')?.fire() ;

//You can also use           
controller!.findInput<bool>('G')?.value = true;

Listen to events

To listen to events you can use:

 controller?.addEventListener((p0) {
    log(
          'Event: $p0 and name is ${p0.name} and properties is ${p0.properties}');
    });

You can use controllers to find all the inputs and animations and so on. controller?.inputs.forEach((v){});

Dynamic Text

To change the text that has been defined in the rive.

controller!.artboard!.component<TextValueRun>('name')?.text = 'Safal';

Now it is time for some cool animations that I made 😁:

To learn rive and create custom animations, you can go to the doc or you can watch this playlist on YouTube which I found quite helpful.

Overall, Rive is a highly effective tool for design and animation. While it may not be essential, it significantly simplifies the process of working with animations.

Stay Curious and Follow to make sure to catch the next post and Best of luck using Rive in your next project!