​
<html>​<head><title>Rive Canvas Example</title><link rel="stylesheet" href="/stylesheets/style.css"></head>​<body><h1>Rive Context 2D Example</h1><p>For more info, check out the <a href="https://www.npmjs.com/package/rive-canvas"> Rive web canvas package</a>.</p><canvas id="riveCanvas" width=512 height=512></canvas></body>​<script src="https://unpkg.com/rive-canvas@0.0.10/rive.js"></script>​<!-- Simple script to run a looping animation --><script>; (function () {// first, instantiate the Rive engine and load the WASM file(s)Rive({locateFile: (file) => 'https://unpkg.com/rive-canvas@0.0.10/' + file,}).then((rive) => {// Rive's ready to rock 'n roll// Let's load up a Rive animation file, typically ending in '.riv'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));// get the default artboard, where the animations we want to interact// with live in this fileconst artboard = file.defaultArtboard();// now we can access the animations; let's get one called 'vibration'const vibrationAnim = artboard.animation('vibration');const vibrationInstance = new rive.LinearAnimationInstance(vibrationAnim);// let's grab our canvasconst canvas = document.getElementById('riveCanvas');const ctx = canvas.getContext('2d');// nw we can create a Rive renderer and wire it up to our 2D contextconst renderer = new rive.CanvasRenderer(ctx);// advance the artboard to render a frameartboard.advance(0);// Let's make sure our frame fits into our canvasctx.save();renderer.align(rive.Fit.contain, rive.Alignment.center, {minX: 0,minY: 0,maxX: canvas.width,maxY: canvas.height}, artboard.bounds);// and now we can draw our frame to our canvasartboard.draw(renderer);ctx.restore();​// track the last time a frame was renderedlet lastTime = 0;​// okay, so we have an animation and a renderer; how do we play an// animation? First, let's set up our animation loop with// requestFrameAnimationfunction draw(time) {// work out how many seconds have passed since a previous frame was// drawnif (!lastTime) {lastTime = time;}const elapsedTime = (time - lastTime) / 1000;lastTime = time;​// advance our animation by the elapsed timevibrationInstance.advance(elapsedTime);// apply the animation to the artboardvibrationInstance.apply(artboard, 1.0);// advance the artboardartboard.advance(elapsedTime);​// render the animation frame// first, clear the canvasctx.clearRect(0, 0, canvas.width, canvas.height);// let's resize it to fit the canvasctx.save();renderer.align(rive.Fit.contain, rive.Alignment.center, {minX: 0,minY: 0,maxX: canvas.width,maxY: canvas.height}, artboard.bounds);// and now we can draw our frame to our canvasartboard.draw(renderer);ctx.restore();​// and kick off the next framerequestAnimationFrame(draw);}// now kick off the animationrequestAnimationFrame(draw);});});})();</script>​</html>
import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:rive/rive.dart';​void main() => runApp(MyApp());​class MyApp extends StatelessWidget {Widget build(BuildContext context) {return MaterialApp(title: 'Rive Flutter Demo',home: Scaffold(body: MyRiveAnimation(),),);}}​class MyRiveAnimation extends StatefulWidget {_MyRiveAnimationState createState() => _MyRiveAnimationState();}​class _MyRiveAnimationState extends State<MyRiveAnimation> {final riveFileName = 'assets/truck.riv';Artboard _artboard;​void initState() {_loadRiveFile();super.initState();}​// 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'),));}}​/// Show the rive file, when loadedWidget build(BuildContext context) {return _artboard != null? Rive(artboard: _artboard,fit: BoxFit.cover,): Container();}}