For the designers

Introduction: What is Rive?

Rive is a brand new animation tool and we tested it to try its innovative features that bring in interactivity while keeping good performance.

Today we’re using Lottie and we’re comparing it to Rive. Lottie is an After Effects plugin. It allows motion designs to be exported out of After Effects and used in-app with their own JS runtime, an NPM Library. While Lottie is built on top of After Effects, Rive is built from scratch with its own animation software allowing developers to add interactivity to their animations. As a result, we have lots of great exclusive features while getting 10 times smaller exported files and better in-app performance.

Features

Editing

After importing your assets (e.g. SVG from AI or Figma), you can edit your content in order to optimize their size or adapt it to your animation needs.

You can use all necessary tools for vector design such as the pen tool or custom shapes. You can also add images but you should try to avoid them if you can use vectors instead as vectors are lighter to load.

Rigging your design for animation

If you’re familiar with the animation process, you know it is better to adjust your design to make animations easier. Rive provides everything you need for this:

• Changing anchor points (origin of transformations).
• Creating groups to use local and global coords for animation.
• Using “constraints” to start creating controllers, to interact with multiple items at once while animating.
• Using the bones tool is useful to create cartoons and bendy effect but also to rig a whole character and make it walk.
• Defining meshes on images to warp them as if they were 3D elements.

Animating

As the title suggests, you can use your rigs and assets to create animations in Rive. Creating animations requires the use of key-frames as is done in a lot of animation software applications. These represent any state in a specific time of your assets properties like their position on x or y axes. Theses keys are set in a timeline and the extrapolation between those are made by Rive. Rive allows you to use curves to smooth your animations and define with a graph editor the velocity of the extrapolation in time.

Blending animations from a state machine and adding interactivity

This is the heart of Rive, state machines are made to blend animations and chain them following a scenario or specific inputs required in-app. For example you can have a walking character in your app and make it wave, then, upon user interactions, you can also run other animations at the same time, without interrupting the first one.

With state machines you can:

• Define your inputs with your favorite developer
• Create scenarios
• Blend animation layers in real time
• Play live your whole scenarios in the Rive tool without coding, thanks to triggers and inputs

For the developers

Introduction: How to use Rive?

Rive provides its own runtimes in all major frameworks and languages, meaning you can load and play your animations from Rive files easily.

Even if state machines are well optimized, they need an animation loop, so you don’t want to have 10 Rive state machine animations in the same page as one loop will trigger operations at all frame ticks. Asset optimization is important so you need to avoid having 10,000 vertices on a subject with no quality needs. When using Rive, you have to think from a real time development perspective and keep performance in mind.

What we achieved during the Hackathon

We learnt all of this about Rive through a proof of concept we developed these 2 days. The goal was to design some animations and handle them in Trela mobile app.

First implementation

The original idea was to display a weather animation on the map that could respond to the maximum level alert. Trela app is already using streams and screens that respond to the global changes of the application. This was really handy to make it work with the rive flutter package. We managed to have an animation with 2 states:

• Cloudy / Rainy
• Sunny

These states were mixed and played with transitions thanks to Rive state machines and provided a really smooth experience.

prefix.SMITrigger? _bump;
  Widget _riveAnim() {
    return Container(
        alignment: Alignment.topRight,
        child: Column(children: [
          Container(
            width: 80,
            height: 50,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Center(
                child: prefix.RiveAnimation.asset(
                  'assets/images/alert-status.riv',
                  fit: BoxFit.cover,
                  onInit: _onRiveInit,
                ),
              ),
            ),
          ),
          TextButton(
              onPressed: () {
                return _bump?.fire();
              },
              child: Text("coucou")),
        ]));
  }

  void _onRiveInit(prefix.Artboard artboard) {
    final controller = prefix.StateMachineController.fromArtboard(
      artboard,
      'main',
    );
    artboard.addController(controller!);
    _bump = controller.findInput<bool>('triggerState') as prefix.SMITrigger;
  }

To use our first animation, we first imported the Rive package and started to build a widget to use in our widget tree.

We can see here we load our “.rive” file and define a controller to select the right animation and artboard. At the same time, we get the Rive inputs to make them match with the user gestures as in this example the “onPressed” action to make the “_bump” animation.

Validation animations

With the same amount of code and the same asset, you can trigger multiple animations depending on the context. Here we wanted to add an easter egg during the creation of a POI with a specific name.

    Container(
        height: 200,
        width: 200,
        child: rive.RiveAnimation.asset(
        'assets/images/check.riv',
        artboard: 'validate',
        fit: BoxFit.cover,
        animations: ['appear'],
        ),
    ),

In the case we wanted to change to the deathStar animation:

    var anim = placeName == 'D34th st4r' ? 'deathStar' : 'appear';

    Container(
        height: 200,
        width: 200,
        child: rive.RiveAnimation.asset(
        'assets/images/check.riv',
        artboard: 'validate',
        fit: BoxFit.cover,
        animations: [anim],
        ),
    ),

We define a variable to trigger a different animation if we have a specific POI name.

The “congratulation” animation

We called it the same way as we did for the validation animations so we can reuse our block code to handle animation in an easier way.

The point here is we create more complex animations than a developer can in CSS. We can also make complex animation with reactive state, for example, if designers allow it in their Rive project, the sparkles could change colors or direction to match some different user interactions.

Faster implementations

At first, it took us a day to fully understand the behavior of the runtime and how to make it work in our app. But once we learned the proper way to use Rive, the process became much quicker.

An other strength is its update friendly experience, if we want to update a design or an animation, all we have to do is update the Rive file without having to change the inputs or animation names.

Conclusion

Rive is a very interesting tool to design and implement interactive animation-based features.

As we explained before, its state-based logic makes it a good match with Trela mobile architecture based on streams for its state management. We also think it could be an interesting way to make Trela or other products more organic and stimulating for users.

Finally, we’re happy with Rive in our testing, so we’re looking forward to adding more animations to our Trela Mobile App, and replacing the existing Lottie ones.