Rive JS WASM runtime.
npm install rive-canvasLightweight Rive runtime for the Web using WASM and Canvas2D.
To use the library, run npm install rive-canvas and then simply include it:
Rive({
locateFile: (file) => 'file://' + file,
}).then((module) => {
// Code goes here using Rive.
});
As with all npm packages, there's a freely available CDN via unpkg.com:
Rive({
locateFile: (file) => 'file://' + file,
}).then(...)
``typescript
import Rive, { File } from 'rive-canvas';
async function loadRivFile(filePath: string): Promise
const req = new Request(filePath);
const loadRive = Rive({ locateFile: (file) => 'file://' + file });
const loadFile = fetch(req).then((res) => res.arrayBuffer()).then((buf) => new Uint8Array(buf));
const [ rive, file ] = await Promise.all([ loadRive, loadFile ]);
return rive.load(file);
}
`
You can use the rive-canvas inside a WebWorker to dissociate it from the main thread.
:
`typescript
const el = document.getElementById('rive');
if ('OffscreenCanvas' in window) {
const canvas = el.transferControlToOffscreen();
const ctx = this.canvas.getContext('2d');
// Create a worker (see below)
const worker = new Worker('rive.worker.js', { type: 'module'});
// Create OffscreenCanvas & transfer it the canvas control
const canvas = this.el.nativeElement.transferControlToOffscreen();
const url = assets/rive/knight.riv;
const animations = ['idle'];
worker.postMessage({ canvas, url, animations }, [canvas]);
} else {
// Do as usual
}
`To learn more about
checkout this article.$3
Create a file rive.worker.js in which we are going to run the animation.
`typescript
import Rive from 'rive-canvas';addEventListener('message', async ({ data }) => {
const { canvas, url, animations } = data;
// Load .riv file
const req = new Request(url);
const loadRive = Rive({ locateFile: (file: string) => 'file://' + file, });
const loadFile = fetch(req).then((res) => res.arrayBuffer());
const [ rive, buf ] = await Promise.all([ loadRive, loadFile ]);
const file = rive.load(new Uint8Array(buf));
const artboard = file.defaultArtboard();
// Associate CanvasRenderer with offset context
const ctx = canvas.getContext('2d');
const renderer = new rive.CanvasRenderer(ctx);
// Move frame of each animation
const animate = animations.map(name => {
const animation = artboard.animationByName(name);
const instance = new rive.LinearAnimationInstance(animation);
return (delta: number) => {
instance.advance(delta);
instance.apply(artboard, 1.0);
}
});
// Draw of the canvas
let lastTime = 0;
function draw(time: number) {
if (!lastTime) lastTime = time;
const delta = (time - lastTime) / 1000;
lastTime = time;
animate.forEach(cb => cb(delta))
artboard.advance(delta);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
renderer.align(rive.Fit.contain, rive.Alignment.center, {
minX: 0,
minY: 0,
maxX: canvas.width,
maxY: canvas.height
}, artboard.bounds);
artboard.draw(renderer);
ctx.restore();
requestAnimationFrame(draw);
}
// Animation Frame run in the WebWorker
requestAnimationFrame(draw);
});
``The code above will be running in a new thread 🎉.