🙋🏻‍♂️ How to Use Rive Files

Import into the Rive editor for free editing, modify as needed, and export RIV files for use.

🎯 Basic Logic

After starting the state machine preview, achieve click-change effects; for progress control, manually adjust bound state data values to preview progress control; when the corresponding progress value reaches 100, it automatically switches states for changes.

🎁 Notes When Exporting RIV

To replace fonts and reduce RIV file size, note the following settings:

Find the corresponding font, then select "Glyphs used" in export settings—this exports only used characters, significantly reducing RIV file size.

🥳 Key Points for Using Rive Files

✍🏼 Rive Initialization Settings

stateMachines: "main" autoBind: true (Other settings can be left unset or use defaults)

💥 Binding Data Fields

• isHover Boolean type: Set to true when mouse hovers over button, false otherwise.
• isClicked Boolean type: Set to true after button click, false before click.
• progressNum Number type: Controls progress change value, range 0-100; when value reaches 100, button automatically changes to next state.

🚀 Advanced Tips and Official Resources

• Provide this case's state machine and field descriptions to AI to generate runtime initialization and interaction code templates, then adjust based on project structure.
• If binding fails, first verify stateMachines name, field naming, and type consistency.
• Official runtime documentation: https://rive.app/docs/runtimes/