For more information on creating Artboards in Rive, please refer to: Artboards .
Choosing an artboard
When a Rive object is instantiated, the artboard to use can be specified. If no artboard is given, the default artboard , as set in the Rive editor, is used. If no default artboard is set, the first artboard is used.
Only one artboard can be used at a time.
Web React React Native Flutter Apple Android new rive . Rive ({
src: 'https://cdn.rive.app/animations/vehicles.riv' ,
canvas: document . getElementById ( 'canvas' ),
artboard: 'Truck' ,
autoplay: true
});
new rive . Rive ({
src: 'https://cdn.rive.app/animations/vehicles.riv' ,
canvas: document . getElementById ( 'canvas' ),
artboard: 'Truck' ,
autoplay: true
});
export const Simple = () => (
< Rive src = "https://cdn.rive.app/animations/vehicles.riv" artboard = "Truck" />
);
// With `useRive` Hook:
export default function Simple () {
const { RiveComponent } = useRive ({
src: 'https://cdn.rive.app/animations/vehicles.riv' ,
artboard: 'Truck' ,
autoplay: true ,
});
return < RiveComponent /> ;
}
export default function App () {
return (
< View >
< Rive resourceName = "truck_v7" artboardName = "Jeep" autoplay />
</ View >
);
}
Manually create an artboard:
// Default artboard
final artboard = riveFile. defaultArtboard ();
// Artboard named
final artboard = riveFile. artboard ( 'Truck' );
// Artboard at index
final artboard = riveFile. artboardAt ( 0 );
Specify the artboard to use in RiveWidgetController
or RiveWidgetBuilder
:
// Default artboard
final artboardSelector = ArtboardSelector . byDefault ();
// Artboard named
final artboardSelector = ArtboardSelector . byName ( 'Truck' );
// Artboard at index
final artboardSelector = ArtboardSelector . byIndex ( 0 );
// Pass to RiveWidgetController
final controller = RiveWidgetController (
riveFile,
artboardSelector : artboardSelector,
);
// Pass to RiveWidgetBuilder
return RiveWidgetBuilder (
fileLoader : fileLoader,
artboardSelector : ArtboardSelector . byName ( 'Main' ),
builder : (context, state) {
// return a widget
},
);
SwiftUI struct AnimationView : View {
var body: some View {
RiveViewModel (
fileName : "dancing_banana" ,
artboardName : "Banana"
). view ()
}
}
UIKit class AnimationViewController : UIViewController {
@IBOutlet weak var riveView: RiveView !
var bananaVM = RiveViewModel (
fileName : "dancing_banana" ,
artboardName : "Banana" ,
)
override func viewDidLoad () {
bananaVM. setView (riveView)
}
}
Via XML < app.rive.runtime.kotlin.RiveAnimationView
app:riveAutoPlay = "true"
app:riveArtboard = "Square"
app:riveResource = "@raw/artboard_animations" />
Via Kotlin animationView. setRiveResource (
R.raw.artboard_animations,
artboardName = "Square" ,
autoplay = true
)