Animation Playback

⚠️ DEPRECATED: Use State Machines instead of direct animation playback at runtime

DEPRECATION NOTICE: This entire page documents the legacy Animation Playback system. For new projects: Use State Machines instead. For existing projects: Plan to migrate from direct animation control to State Machines as soon as possible. This content is provided for legacy support only.

Rive lets you specify what animations and state machines to mix and play and control the play/pause state of each animation.

The term animations may collectively refer to both animations and state machines. In this section, we explore how to deal with specific animation playback, rather than state machines.

If you are trying to coordinate multiple animations’ playback at runtime, consider using a state machine instead to do this for you!

Choosing starting animations

Starting animations can also be chosen when Rive is instantiated. The first animation on the artboard may play if one is not provided, or a state machine is not set.

// Create a File, Artboard, and SingleAnimationPainter
final file = (await File.asset(
  'assets/rewards.riv',
  riveFactory: Factory.rive,
))!;
final artboard = file.artboard('Main')!;
final animationPainter = SingleAnimationPainter("Artboard Name");

// Later create the widget
return RiveArtboardWidget(
  artboard: artboard,
  painter: animationPainter,
);

Controlling playback

Flutter handles things a little differently compared to the other runtimes due to its reactive nature.

Every animation and state machine in Flutter has an underlying painter that manages the state/painting/advancing.

In order to access controls for animations, you’ll need to create a SingleAnimationPainter or StateMachinePainter and pass it to the RiveArtboardWidget.

Or you can create RiveWidgetController and pass it to the RiveWidget to control playback of state machines with a more feature-rich API (recommended).

This painter concept is extensible, and you can also create your own custom painter, for example, to control multiple animations at once.