🙋🏻‍♂️ How to Use Rive Files

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

🎯 Basic Logic

After starting the state machine preview, achieve click-change effects; for progress control, manually adjust the 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 Files

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 the button, false otherwise.
• isClicked Boolean type: Set to true after button click, false before clicking.
• progressNum Number type: Controls progress change values, range set to 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 that stateMachines name, field names, and types match.
• Official runtime documentation: https://rive.app/docs/runtimes/