View Model Properties

1m 54sPublished May 14, 2025

SummaryVersion Notes (Draft)

This lesson covers the core updates regarding Data Binding and View Model Properties in the Rive editor. The primary objective is to introduce how to control the State Machine using View Model properties instead of traditional State Machine inputs. The update retains numbers, booleans, and triggers while introducing strings, colors, and enums, along with converters and instances to provide a much higher level of data control.

Architecture Scalability: View Model properties form the structural foundation of Data Binding. They enable multiple variations of the same Artboard instance to cleanly host completely different visual properties (such as distinct string texts or color values) under a unified logic template.
Converter Capabilities: With the integration of Converters mentioned in this update, users can execute value translation effortlessly, such as automatically converting a raw input number into a specific visual color spectrum or layout percentage mapping.
Workflow Familiarity: Although binding a View Model number property to a conditional state transition feels identical to using legacy numbers, the newer system binds properties at the Artboard level, allowing deeper global data exposure for developer integration.

📌 Key Points

Define and organize view model properties to provide bindable data for UI and animation.

📝 Notes

Markdown

0 chars

Step by Step

00:00:02

Feature Updates Introduction:

Explaining the shift from using basic State Machine inputs to the advanced Data Binding system. Alongside classic numbers, booleans, and triggers, the system now natively supports strings, colors, and enums, as well as converters and multi-property artboard instances.
00:00:45

Setting Up Transitions:

Creating a practical example of transitioning between Idle and Run states. Wire up two reciprocal transitions within the State Machine layer and assign them an appropriate duration value.
00:00:54

Creating a View Model:

Selecting the target Artboard, navigating to the right-side inspector panel, locating the View Model section, and clicking the plus (+) button to instantiate a new View Model.
00:01:02

Adding Property:

Clicking the plus icon under the created View Model, selecting the number property type, and renaming this specific property to num to serve as the controller.
00:01:06

Mapping Transition Conditions:

Highlighting the transition wires between states, navigating to the conditions pane, and adding the View Model property num. Configure it so that the transition triggers in one direction when num equals 1, and in the opposite direction when it equals 0.
00:01:22

Switch Advocacy Summary:

Demonstrating state changes by toggling the property values in real-time. Rive highly encourages users to transition from traditional State Machine inputs to View Model properties to gain superior architecture control over runtime source assets.