🙋🏻‍♂️ 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, which 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

• isHovered Boolean type: Set to true when mouse hovers over the button, false otherwise.
• isClicked Boolean type: Set to true after button click, false before click.
• progress Number type: Used to control 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 corresponding runtime initialization and interaction code templates, then adjust based on project structure.
• If binding fails, first verify consistency of stateMachines name, field naming, and types.
• Official runtime documentation: https://rive.app/docs/runtimes/