Rive Parameters
You can set any of the following parameters on the Rive object when instantiating:
export interface RiveParameters {
canvas: HTMLCanvasElement | OffscreenCanvas, // required
src?: string, // one of src or buffer is required
buffer?: ArrayBuffer, // one of src or buffer is required
artboard?: string,
animations?: string | string[],
stateMachines?: string | string[],
layout?: Layout,
autoplay?: boolean,
onLoad?: EventCallback,
onLoadError?: EventCallback,
onPlay?: EventCallback,
onPause?: EventCallback,
onStop?: EventCallback,
onLoop?: EventCallback,
onStateChange?: EventCallback,
useOffscreenRenderer?: boolean,
}
canvas
- (required) Canvas element to draw Rive animations onto.src?
- (optional) File path or URL to the .riv file to use. One ofsrc
orbuffer
must be provided.buffer?
- (optional) ArrayBuffer containing the raw bytes from a .riv file. One ofsrc
orbuffer
must be provided.artboard?
- (optional) Name of the artboard to use.animations?
- (optional) Name or list of names of animations to play.stateMachines?
- (optional) Name or list of names of state machines to load.layout?
- (optional) Layout object to define how animations are displayed on the canvas.autoplay?
- (optional) If true, the animation will automatically start playing when loaded. Defaults to false.onLoad?
- (optional) Callback that gets fired when the .riv file loads.onLoadError?
- (optional) Callback that gets fired when an error occurs loading the .riv file.onPlay?
- (optional) Callback that gets fired when the animation starts playing.onPause?
- (optional) Callback that gets fired when the animation pauses.onStop?
- (optional) Callback that gets fired when the animation stops playing.onLoop?
- (optional) Callback that gets fired when the animation completes a loop.onStateChange?
- (optional) Callback that gets fired when a state change occurs.useOffscreenRenderer?
- (optional) Boolean flag to determine whether to use a shared offscreen WebGL context rather than create its own WebGL context for this instance of Rive. This is only relevant for the@rive-app/webgl
package. If you are displaying multiple Rive animations, it is highly encouraged to set this flag totrue
. Defaults tofalse
.
Last modified 8mo ago