Rive 运行时动画控制器

解决什么问题

在应用里接入 Rive 动画时，最常见的卡点不是「能不能画出来」，而是画出来之后怎么和业务数据对齐。设计师在编辑器里搭好了状态机，但在代码侧你要自己处理几件事：加载 .riv 文件、创建画布运行时、监听状态机事件、在合适的时机写入输入值，以及把 UI 层的数据变化同步回动画状态。

手写这些胶水代码很容易出现散落各处的回调、状态切换时机不同步、输入值命名和编辑器里不一致等问题。这个技能把 runtime 层的控制逻辑收敛到一处，让动画状态和业务数据之间的通路变得明确。

核心能力

• 基于 @rive-app/canvas-advanced 在运行时驱动 .riv 交互动画，而不是只做静态播放。
• 管理状态机的输入，你可以通过输入名设置值，进而驱动状态机在多个状态之间流转。
• 通过 Rive WASM runtime 运行，动画逻辑跑在 WASM 里，主线程侧只负责调用和读取。
• 把动画状态与应用数据同步：状态机的当前状态可以被读取，应用侧据此更新 UI 或业务逻辑。

使用时要注意

• 你需要清楚状态机的输入名和状态名。运行时不会帮你猜测这些标识符，它们来自 Rive 编辑器里的定义，代码和编辑器两侧必须对齐。
• 输入值的赋值时机很重要。状态机对输入的响应取决于当前状态和触发条件，同一个输入值在不同状态下的行为可能不同，建议在状态机进入预期状态后再写入。
• .riv 文件需要通过运行时加载。如果你的应用用打包工具，要确保 WASM runtime 的产物能被正确解析，特别是 @rive-app/canvas-advanced 的资源路径。
• 这个技能解决的是运行时控制层，不包含设计工具侧的工作流，也不负责动画内容的创建。

适用场景

适合需要在 Web 应用里集成交互动画、且动画行为需要响应业务数据的项目，比如带有状态切换反馈的组件、流程引导动画，或需要根据用户操作改变动画表现的场景。如果你只需要播放一段固定循环的动画，而不需要状态机交互，那这套运行时控制对你的收益有限。