State Machine Playback

For more information on designing and building state machines in Rive, please refer to: State Machine. Rive’s state machines provide a way to combine a set of animation states and manage the transition between them that can be programmatically controlled with Data Binding.

Playing state machines

State machines are instantiated by providing a state machine name to the Rive object when instantiated.

Autoplay the State Machine

To autoplay a state machine immediately after it loads, simply set autoplay to true.

const r = new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    autoplay: true,
    stateMachines: 'bumpy',
    onLoad: () => {}
});

Controlling State Machine Playback

You can manually play and pause the State Machine using the play, pause, and stop methods.

const r = new rive.Rive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    canvas: document.getElementById('canvas'),
    stateMachines: 'bumpy',
    onLoad: () => {}
});

const handlePlay = () => {
  r.play()
}

const handlePause = () => {
  r.pause()
}

const handleStop = () => {
  r.stop()
}

Autoplay the State Machine

To auto-play a state machine by default, simply set autoPlay to true.

export default function Simple() {
  const { RiveComponent } = useRive({
    src: 'https://cdn.rive.app/animations/vehicles.riv',
    stateMachines: "bumpy",
    autoplay: true,
  });

  return <RiveComponent />;
}

Controlling State Machine Playback

You can manually play and pause the State Machine using the play, pause, and stop methods.

export default function Simple() {
const { rive, RiveComponent } = useRive({
  src: "https://cdn.rive.app/animations/vehicles.riv",
  stateMachines: "bumpy",
  autoplay: true,
});

const handlePlay = useCallback(() => {
  rive?.play();
}, [rive]);

const handlePause = useCallback(() => {
  rive?.pause();
}, [rive]);

const handleStop = useCallback(() => {
  rive?.stop();
}, [rive]);

return (
  <div>
    <RiveComponent />
    <div style={{ marginTop: 12 }}>
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
      <button onClick={handleStop}>Stop</button>
    </div>
  </div>
);
}

Autoplay the State Machine

To auto-play a state machine by default, simply set autoPlay to true.

  <Rive
    resourceName={'vehicles'}
    autoplay={true}
    stateMachineName="bumpy"
  />

Controlling State Machine Playback

You can manually play and pause the State Machine using the play and pause methods.

import Rive, { RiveRef } from 'rive-react-native'

export default function App() {
  const riveRef = React.useRef<RiveRef>(null);

  const handlePlayPress = () => {
    riveRef?.current?.play();
  };

  const handlePausePress = () => {
    riveRef?.current?.pause();
  };

  return (
    <View>
      <Rive
        resourceName="truck_v7"
        stateMachineName="bumpy"
        ref={riveRef}
      />
      <Button onPress={handlePlayPress} title="play">
      <Button onPress={handlePausePress} title="pause">
    </View>
  );
}

There are a number of ways to play/select a state machine in Flutter.

When using `RiveWidgetController` (recommended)

When you create a RiveWidgetController it will use the default state machine, or you can specify a state machine by name or index.

// Default state machine
var controller = RiveWidgetController(riveFile);
// By name
controller = RiveWidgetController(
  riveFile,
  stateMachineSelector: StateMachineSelector.byName("State Machine 1"),
);
// By index
controller = RiveWidgetController(
  riveFile,
  stateMachineSelector: StateMachineSelector.byIndex(0),
);

Passing this controller to a RiveWidget will automatically play the state machine.

@override
Widget build(BuildContext context) {
  return RiveWidget(controller: controller);
}

You can mark the controller as active to play/pause the state machine (advancing and drawing):

final controller = RiveWidgetController(riveFile);
controller.active = false;

The StateMachineSelector can also be passed to RiveWidgetBuilder to specify which state machine to use:

return RiveWidgetBuilder(
  fileLoader: fileLoader,
  stateMachineSelector: StateMachineSelector.byIndex(0),
  builder: (context, state) => switch (state) {
    /// ...
  },
);

When using `StateMachinePainter`

When using StateMachinePainter, you can specify the state machine to use by passing an optional name.

// Default state machine
final painter = rive.StateMachinePainter(withStateMachine: _withStateMachine);
// By name
painter = rive.StateMachinePainter(
  withStateMachine: _withStateMachine,
  stateMachineName: 'State Machine 1  ',
);

Creating a state machine directly

Create the state machine directly from an Artboard:

final artboard = riveFile.defaultArtboard()!;
// Default state machine
var stateMachine = artboard.defaultStateMachine();
// By name
stateMachine = artboard.stateMachine('State Machine 1');
// By index
stateMachine = artboard.stateMachineAt(0);

Autoplay the State Machine

By default, RiveViewModel will automatically play the state machine you’ve given it.

SwiftUI

var stateChanger = RiveViewModel(
    fileName: "skills",
    stateMachineName: "Designer's Test",
    artboardName: "Banana"
)

UIKit

class StateMachineViewController: UIViewController {
    var viewModel = RiveViewModel(
        fileName: "skills",
        stateMachineName: "Designer's Test",
        artboardName: "Banana"
    )

    override public func loadView() {
        super.loadView()

        guard let stateMachineView = view as? StateMachineView else {
            fatalError("Could not find StateMachineView")
        }

        viewModel.setView(stateMachineView.riveView)
    }
}

Play

If you set autoplay to false you can play the active animation or state machine very simply.

simpleVM.play()

Pause/Stop/Reset

Based on certain events in your app you may want to adjust the playback further.

simpleVM.pause()
simpleVM.stop()
simpleVM.reset()

Android

Via XML

<app.rive.runtime.kotlin.RiveAnimationView
    android:id="@+id/simple_state_machine"
    android:layout_width="match_parent"
    android:layout_height="400dp"
    app:riveResource="@raw/skills"
    app:riveStateMachine="Designer's Test" />

Via Kotlin

animationView.setRiveResource(
    R.raw.simple_state_machine,
    autoplay = true,
    stateMachineName = "Designer's Test"
)

Additionally, you can use the same APIs from animation playback (i.e play, pause, and stop) to control state machine playback, as long as you set the isStateMachine attribute to true.

animationView.play(
    "Designer's Test",
    Loop.AUTO,
    Direction.AUTO,
    isStateMachine = true
)

animationView.pause(
    "Designer's Test",
    isStateMachine = true
)

animationView.stop(
    "Designer's Test",
    isStateMachine = true
)

Runtime Fundamentals

App Runtimes

State Machine Playback

Playing state machines

Autoplay the State Machine

Controlling State Machine Playback

Autoplay the State Machine

Controlling State Machine Playback

Autoplay the State Machine

Controlling State Machine Playback

When using `RiveWidgetController` (recommended)

When using `StateMachinePainter`

Creating a state machine directly

Autoplay the State Machine

SwiftUI

UIKit

Play

Pause/Stop/Reset

Android

Via XML

Via Kotlin

Runtime Fundamentals

App Runtimes

​Playing state machines

​Autoplay the State Machine

​Controlling State Machine Playback

​Autoplay the State Machine

​Controlling State Machine Playback

​Autoplay the State Machine

​Controlling State Machine Playback

​When using RiveWidgetController (recommended)

​When using StateMachinePainter

​Creating a state machine directly

​Autoplay the State Machine

​SwiftUI

​UIKit

​Play

​Pause/Stop/Reset

​Android

​Via XML

​Via Kotlin

Playing state machines

Autoplay the State Machine

Controlling State Machine Playback

Autoplay the State Machine

Controlling State Machine Playback

Autoplay the State Machine

Controlling State Machine Playback

When using `RiveWidgetController` (recommended)

When using `StateMachinePainter`

Creating a state machine directly

Autoplay the State Machine

SwiftUI

UIKit

Play

Pause/Stop/Reset

Android

Via XML

Via Kotlin