• Y AnimationPlayground
研究工作台
  • 实验总览
    • D3
    • Lottie
    • Rive
    • Canvas
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

Rive

v0.4 参考实现

构建由状态机和运行时数据驱动的交互式矢量图形。

查看旗舰作品查看技术选型
Rive 状态机Canvas Lite资产加载中
由输入驱动的交互动画资产
React 发送 trigger,Rive 文件内部的状态机决定如何响应和过渡。
状态机
bumpy
输入类型
bump · Trigger
本次触发
0 次
资产所有权
Rive 官方 CDN

运行时边界

应用只表达“发生了什么”,状态机文件决定“动画如何响应”。这能减少组件中的过渡分支,但需要把资产版本、输入命名和网络失败纳入工程治理。

Canvas Lite 不包含 Rive Text 与音频能力,适合当前只需要图形和状态机的实验,避免为未使用功能支付运行时体积。

资产内状态机

过渡规则随 .riv 文件交付,应用通过 Boolean、Number 或 Trigger 输入驱动。

连续交互响应

运行时可在多个状态间平滑混合,适合角色、控件与品牌交互。

运行时能力裁剪

按产品需求选择 Canvas Lite、Canvas、WebGL2,避免默认引入全部能力。

实验结论

Rive 的位置介于设计资产和应用逻辑之间:设计师在资产中定义视觉状态与过渡,前端只绑定有业务意义的输入。它比线性时间轴更适合高互动组件,但资产输入就是一套需要版本治理的接口;关键产品路径还必须考虑自托管和静态后备。

应该负责

  • 封装角色、控件和品牌资产内部的视觉状态与过渡。
  • 用明确输入响应应用状态、指针或手势。

不应该负责

  • 不替代 React 的业务状态与可访问语义。
  • 不应让关键产品流程依赖没有后备的远程二进制资产。