什么是Rive
Rive 在此之前叫 flare ，是 2dimensions 公司的开源动画产品，在发布之初由于和 Flutter 团队有深入合作，所以在初期一直是 Flutter 官方推荐的动画框架。
Rive文件的一些概念
- Artboards：画布，rive 里至少会有一块画布，当然一个 riv 动画文件可以有多个画布
- animations：需要播放的动画
- StateMachine：状态机，可以将动画连接在一起并定义切换条件的支持
- Inputs：StateMachine 的输入，然后可用于与 StateMachine 交互并修改动画切换的状态
这些组成部分帮助rive动画创建不同的状态与逻辑判断
Rive特点
-
全平台支持
- 早期广泛用于flutter，用于客户端渲染动画，目前已支持为全平台使用。如web，macOs，ios，Android，c++，unity等等
-
支持状态机
- 可以对动画设定多个状态，允许创建复杂的动画逻辑和状态转换
- 允许在动画内部处理逻辑判断，从而触发不同的动画效果
- 可通过监听自定义事件，修改动画状态
-
性能更好，体积更小
- 基于wasm与canvas进行渲染，性能更好，在性能不佳的设备上也能流畅运行
-
矢量动画，可无损缩放
-
易上手，可在线编辑
- 除桌面端外，还提供了web端Rive动画编辑工具，开发者可直接在web中预览并微调
- 提供了丰富的动画效果和过度，且能快速的创建自定义效果，可视化编辑
-
Rive动画的保存需要专属的文件类型xxx.rive，如anima.rive
- 二进制文件
综上，可以将Rive动画近似的理解为一个自带逻辑判断、事件监听的canvas动画
与Lottie的对比
| Rive | Lottie | |
|---|---|---|
| 文件类型 | .rive文件，二进制文件 | json格式，文本格式 |
| 渲染结果 | canvas | svg/canvas/html |
| 运行环境 | 需要wasm文件 | 普通js环境即可 |
| 支持复杂的交互 | 是 | 否 |
| 性能 | 优于lottie，因为直接处理二进制文件 | 相对于Rive更慢，因为是文本格式，需要解析json |
| 体积 | 更小 | 相对更大 |
| 流畅性 | 兼容更多的旧设备 | 相对于Rive，兼容的更少 |
| 动画开发平台 | web、pc端 | pc端 |
| 是否矢量图 | 是，可无损缩放 | 是，可无损缩放 |
结论
1.对开发而言，利用Rive生成动画更易上手
2.对于简单的动画，lottie更合适，因为此时体积、性能没有明显差距，而使用Rive需要引入wasm，而wasm文件往往几M或者更大，会影响动画的首屏加载
3.复杂的、需要交互的动画更适合Rive，特别是需要兼容性能不好的设备的场景
