With the runtime added to your project, it's time to load an animation file!
With the Rive engine instantiated, we can load in our Rive (.riv) animation file. Here, we're loading our loader.riv
file locally.
const req = new Request('/rive/loader.riv');fetch(req).then((res) => {return res.arrayBuffer();}).then((buf) => {// we've got the raw bytes of the animation,// let's load them into a Rive fileconst file = rive.load(new Uint8Array(buf));// ...})
In Rive, animations are tied to artboards. A Rive file can have multiple artboards, but if you're just working with one you can grab it via defaultArtboard
const artboard = file.defaultArtboard();
Alternatively, you can reference a specific artboard.
const artboard = file.artboard('my_artboard');
Artboards hold references to animations. Reference a particular animation via its name set within the editor.
const myAnim = artboard.animation('animation_name');
Its good practice to create an instance of your animation.
const myAnimInstance = new rive.LinearAnimationInstance(myAnim);
An animation instance is useful if you want Rive to manage state, which manages the animation's time, direction, and looping.
We’re now ready to display and run the animation.
Start by creating a new StatefulWidget
and defining an Artboard
object. In this instance, we've also declared the Rive filename as a variable.
class MyRiveAnimation extends StatefulWidget {_MyRiveAnimationState createState() => _MyRiveAnimationState();}class _MyRiveAnimationState extends State<MyRiveAnimation> {final riveFileName = 'assets/truck.riv';Artboard _artboard;}
Define a method to load your animation into a RiveFile
. Once imported we can access any of the file’s artboards and play the animations they contain. In this example, there’s one artboard, so we can fetch that with the file.mainArtboard
property.
// loads a Rive filevoid _loadRiveFile() async {final bytes = await rootBundle.load(riveFileName);final file = RiveFile();if (file.import(bytes)) {// Select an animation by its namesetState(() => _artboard = file.mainArtboard..addController(SimpleAnimation('idle'),));}}
Note that we load raw bytes. This gives you flexibility in where you source your Rive data: as assets, over a network, from a local database, or by other means.
As we're using a StatefulWidget
, we can now load the file directly inside the widget on initialization.
void initState() {_loadRiveFile();super.initState();}
Check out the example page to see these steps combined into a single file.
Stay tuned for information on our upcoming iOS runtime!
Stay tuned for information on our upcoming Android runtime!