RiveViewModelwill automatically play the animation or state machine you've given it.
stopmethods, either passing in the names of the animations you want to affect or passing in nothing which will affect all instanced animations.
onLoadwhen a rive file has been loaded and initialized; it's now ready for playback
onPlaywhen one or more animations play; provides a list of animations
onPausewhen one or more animations pause; provides a list of animations
onStopwhen one or more animations are stopped; provides a list of animations
onLoopwhen an animation loops; provides the animation name
riveobject returned from the
useRivehook to invoke playback controls. See the example below here: https://codesandbox.io/s/animation-playback-controls-rive-react-7yo76i
speedis negative, the animation goes in reverse.
timeinput will let you specify a moment in ms in the animation.
modeinput will force the mode "one-shot", "loop" or "ping-pong" (if undefined, default mode is used).
refon the Rive component rendered. Once the
refis populated, you can trigger functions such as
pause, etc. See the
refmethod docs for React Native here.
RiveAnimationwidget, it creates and manages controllers for each.
RiveAnimationControllerfor each animation and pass the controller to the
RiveAnimationwidget instead of its name. You can mix and match passing in controllers and names, but avoid passing in both for the same animation.
SimpleAnimationis used to play and pause a single animation.
onStopthat will fire when the animation starts and stops playing respectively.
curvesanimations are managed by the runtime and their looping animations will play continuously.
bounceis a one-shot and is triggered when the button is tapped. The runtime will then play the
bounceanimation, mixing it cleanly with the looping animations.
RiveViewModelto display, you can invoke animation playback control methods on a reference to this view model.
play(animationName: String? = nil, loop: Loop = .autoLoop, direction: Direction = .autoDirection)
animationName- Name of the animation to play
loop- Loop mode to play the animation in. Possible values listed below:
oneShot- plays animation through once
loop- plays through animation and repeats from the set starting time
pingPong- plays animation from start -> end, then end -> start on repeat
autoLoop(default) - plays through the loop setting set on the animation
direction- Direction to play the animation in
backwards- plays through animation timeline backward
forwards- plays through animation timeline forwards
autoDirection- plays through direction set on the animation
RiveViewModel. You can use delegates to define functions that hook into when certain playback events are invoked. See the below class for how you can hook into the following playback events: