🙋🏻‍♂️ How to Use Rive Files

Import into the Rive editor to freely edit, 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 the bound state data values to preview progress control effects; when the corresponding progress value reaches 100, it automatically switches states for changes.

🎁 Notes When Exporting riv

To replace your own font 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 clicking.
• progressNum Number type: Controls progress change values, range set to 0-100; when value reaches 100, button automatically changes to next state.
• endTextTrigger Trigger type: Triggers once each time the button's final state text is clicked.

🚀 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 is invalid, first verify consistency of stateMachines name, field naming, and types.
• Official runtime documentation: https://rive.app/docs/runtimes/