RiveStateMachineInput Class Reference

#include <rivestatemachineinput.h>

Inherits QObject, and QQmlParserStatus.

Detailed Description

Interface for binding QML properties to Rive's state machine.

The RiveStateMachineInput bridges QML and Rive's state machine. This utility enables dynamic interactions with the animation state machine using QML.

Usage

Direct Property Bindings

Create an instance of RiveStateMachineInput and set its properties. These properties will automatically be matched to their corresponding names in the Rive animation state machine, considering exclusions from the reserved word list.

Note

The property names in QML should be the same as those in the Rive animation, excluding the names listed in reservedWords.

RiveQtQuickItem {
    stateMachineInterface: RiveStateMachineInput {
        signal triggerName()    // Corresponds to Rive's trigger
        property real level: slider.value  // Matches Rive's input
        property bool onOff: button.checked // Matches Rive's input
        property bool status  // Matches Rive's input
    }
}

To invoke the trigger in the above example from QML, you can call triggerName signal:

riveItem.stateMachineInterface.triggerName();

String Interface

This approach uses string names to access the properties and triggers in Rive's state machine, providing flexibility and dynamism.

Repeater {
    model: riveItem.stateMachineInterface.riveInputs
    delegate: Button {
        id: buttonDelegate
        text: {
            if (modelData.type === RiveStateMachineInput.RiveTrigger) {
                return modelData.text
            }
            if (modelData.type === RiveStateMachineInput.RiveBoolean
                    || modelData.type === RiveStateMachineInput.RiveNumber) {
                return modelData.text + ": " + riveItem.stateMachineInterface.listenTo(modelData.text).value
            }
        }
 
        onClicked: {
            if (modelData.type === RiveStateMachineInput.RiveTrigger) {
                riveItem.stateMachineInterface.callTrigger(modelData.text)
            }
            if (modelData.type === RiveStateMachineInput.RiveBoolean) {
                riveItem.stateMachineInterface.setRiveProperty(modelData.text,
                    !riveItem.stateMachineInterface.listenTo(modelData.text).value)
            }
        }
 
        Slider {
            id: slider
            visible: modelData.type === RiveStateMachineInput.RiveNumber
            anchors.fill: parent
            from: 1
            value: riveItem.stateMachineInterface.listenTo(modelData.text).value
            to: 100
            stepSize: 1
            onValueChanged: riveItem.stateMachineInterface.setRiveProperty(modelData.text, value)
        }
    }
}
 
RiveQtQuickItem {
    id: riveItem
    currentArtboardIndex: 0
    currentStateMachineIndex: 0
}

Here, riveItem.stateMachineInterface.riveInputs provides an array of JS objects, each having the format { text: "propertyname", type: RivePropertyType }. The possible RivePropertyType values are:

• RiveNumber
• RiveBoolean
• RiveTrigger

Reserved Words

The following words are reserved and cannot be used as property names in QML for matching with the Rive animation state machine:

• await, break, case, catch, class, const, continue, debugger, default, delete, do, else, export, extends, finally, for, function, if, import, in, instanceof, new, return, super, switch, this, throw, try, typeof, var, void, while, with, yield, enum, implements, interface, let, package, private, protected, public, static, riveQtArtboardName, riveInputs.