Rive

1. 矢量与光栅混合设计
   一个文件里可以同时使用矢量图形和光栅图片，适合 UI、图标、纹理和背景等不同内容。
2. State Machine（状态机）
   用可视化方式定义动画状态和触发逻辑。按钮悬停、点击、加载、切换等交互都可以在这里完成。
3. Data Binding（数据绑定）
   把 App 内的实时数据绑定到动画属性。位置、颜色、文字、图片等都可以跟随数据变化。
4. Bones 骨骼系统
   给角色或物体搭建骨架，再通过骨骼控制动作，不需要逐帧绘制。
5. Layout 布局系统
   可以针对不同屏幕尺寸和方向调整动画布局，一套设计适配多个设备。
6. AI Agent
   在编辑器中用自然语言描述需要的交互逻辑，由 AI 协助生成脚本。
7. 多平台运行时
   同一个 .riv 文件可以通过官方运行时接入 iOS、Android、Web、Flutter、React Native、Unity、Unreal 等平台。

我花了一周左右用 Rive 编辑器做了一个简单交互：按钮从闲置进入悬停，再到点击成功，同时带一段加载动画。

上手难度：偏高。

前两个小时基本是在摸索。

Rive 的操作逻辑和 Figma、After Effects 都不太一样，更像一个给动画用的可视化 IDE。

最需要适应的是 State Machine。

你得先做好几个动画状态，再进入状态机连接它们，设置什么情况下从 A 切到 B。

如果习惯了“时间轴做好 → 导出”的 AE 或 Lottie 工作流，刚开始会有点拧巴。

不过搞清楚“状态就是动画片段，连线就是触发条件”之后，思路会顺很多。

实际运行效果是我最满意的部分。

我导出 .riv 文件后，直接放进官方 Web 示例里测试，悬停、点击和加载效果都能正常工作，和编辑器预览基本一致。

测试文件只有 18KB。对需要大量动效的移动端产品来说，这种体积优势很有吸引力。

我踩过的坑

1. 不要一开始就做复杂角色
   我试过用 Bones 做一个挥手角色，结果手臂一直穿模。骨骼权重需要仔细调，不是把骨架拖上去就结束。新手先从按钮、开关、进度条这类 UI 微交互开始更合适。
2. 状态机很容易写出循环
   我有一次把 A、B 两个状态的触发条件设反，动画就在两个状态之间不停切换。Rive 不会替你把这类逻辑问题完全兜住，状态多了以后要自己检查。
3. 免费版不能直接用于上线
   我做好测试文件后才发现，Free 计划不能导出生产用 .riv。最后开了 Cadet 才完成测试。如果目标是上线，最好一开始就把这部分成本算进去。
4. 中文资料不算多
   官方教程和社区内容仍以英文为主。遇到具体问题时，我主要靠官方文档、Blog 和 YouTube。

优点

• 设计可以直接进入生产环境
  不需要设计师做完后再由开发重新还原一遍，交接成本明显更低。
• 文件体积小
  对移动端、弱网和包体敏感的产品很有优势。
• 交互能力比单纯播放动画强
  State Machine 可以根据用户操作和数据实时变化，而不是只播放一段预设动画。
• 跨平台一致性好
  同一个 .riv 文件可以进入 Web、App 和游戏环境，减少不同平台分别重做的成本。
• 已有大规模产品使用案例
  Spotify、Duolingo、LinkedIn、BMW 等产品和团队都使用过 Rive。

缺点

• 学习曲线明显
  State Machine、Data Binding、Bones 等概念都需要单独理解，不属于打开就会用的工具。
• 生态规模仍不如 Lottie
  现成模板、社区素材和第三方资源没有 LottieFiles 那么丰富。
• 部分高级能力仍在持续完善
  一些遮罩、脚本和编辑能力还在迭代中。
• 高级协作能力需要更高套餐
  免费版的协作能力有限，Libraries 等团队功能需要 Voyager。

适合谁

UI / UX 设计师

如果你希望自己把交互动效做到可运行状态，而不是只交一份效果稿，Rive 很适合。

移动端和游戏团队

文件小、性能好，又能跨平台复用，适合长期维护大量产品动效。

需要数据驱动动画的产品

仪表盘、体育比分、进度显示、个性化页面这类场景，Data Binding 很有价值。

对性能和包体敏感的项目

车载系统、低端设备、IoT 或弱网环境，都比较适合 Rive。

不太适合谁

只需要一次性播放动画的人

如果只是做 GIF、社交视频或普通 Loading，After Effects、CapCut 或现成 Lottie 素材通常更省时间。

时间特别紧的项目

Rive 前期需要学习和调试。当天就要上线效果时，找成熟模板往往更稳。

没有交互需求的平面设计

如果只是做静态视觉，Rive 的优势基本发挥不出来，Figma 或 Illustrator 会更顺手。

Rive 和 Lottie 解决的并不是完全相同的问题。

Lottie 更接近“把做好的动画播放出来”，Rive 则把动画、状态和交互逻辑一起带进运行环境。

如果只是给网页加一个 Loading 动画，Lottie 已经够用。

但如果希望动画能跟着用户操作和实时数据变化，例如拖动进度、按钮反馈、主题切换、状态变化，Rive 的优势会很明显。

代价也很直接：它比普通动效工具难学。

对个人用户来说，Cadet 的门槛不算高，而且导出后没有额外运行时授权费。比较合适的方式是先用免费版做一个按钮或开关，熟悉 State Machine，再决定是否付费。

如果只是想快速做一个能看的动画，不必硬学 Rive。
如果产品真的需要交互式动效，它值得花时间。