跳到主要内容

最佳实践(Best Practices)

Rive 在编辑器和运行时都能高效播放交互动效。但如果动画与资源未优化,仍可能导致下载体积增大、内存占用升高、低端设备掉帧等问题。本文汇总设计阶段与运行时阶段的关键优化建议。

建议在目标设备/目标平台上持续实机测试,尤其是低端移动设备。

设计阶段考虑(Design-time Considerations)

资源优化(Asset Optimizations)

图片、音频、字体通常是 .riv 文件体积和内存开销的主要来源。

只有在画板中实际使用到的资源才会编译进运行时;仅放在 Assets 面板但未使用的资源不会增加导出体积。

字体(Fonts)

字体文件常包含大量不需要的字形(例如数学符号、希腊字符、图标等)。建议在导出前按需筛选字形范围,减少字体和 .riv 体积。

位图尺寸(Raster Image Sizes & Dimensions)

请确保图片分辨率与实际显示尺寸匹配:

  • 避免用 8000+ 大图只显示在很小区域(例如 100×100)。
  • 大图即使压缩,仍会占用较多运行时内存。
  • 若是长滚动背景等场景,可拆分为多张小图,或部分改为矢量实现。

位图压缩(Raster Image Compression)

可在 Rive 编辑器内直接压缩图片用于运行时输出,同时保留原图。若资源嵌入动画,也会降低导出的 .riv 体积。

建议优先考虑 WebP 以获得更小体积与更好性能。

矢量图(Vector Images)

控制顶点数量。少量冗余顶点影响不大,但成千上万顶点会显著拖慢性能。尤其要注意 AI 生成矢量或位图自动描摹后的复杂路径。

导入 Lottie(Importing Lottie Files)

虽然可用 Lottie 转换器快速导出 .riv,但通常直接在 Rive 重建动画能获得更小体积与更好控制。若必须导入 Lottie,建议:

  • 将 PNG 资源改为 WebP;
  • 字体仅导出必要字形;
  • 使用“外部资源加载(Out-of-band Assets)”复用字体/图片。

Web 端混合模式(Layer Blend Modes for Web)

混合模式在 Web 端通常成本较高,会带来额外纹理复制与合成开销。建议在网页项目中谨慎使用并尽量减少数量。

画板注意事项(Artboard Considerations)

裁剪画板(Clipped Artboards)

裁剪功能可用,但在性能紧张时应减少全画板裁剪,优先对局部对象/组进行裁剪,避免不必要的可见性计算。

未使用画板(Unused Artboards)

未使用画板仍会包含在 .riv 中并在加载时解析,增加初始化和内存成本。发布前建议清理无用画板。

静止状态与空闲动画(Idle Animations)

对按钮、图标等常驻 UI:

  • 优先使用一次性动画(one-shot)而非无意义循环;
  • 保持状态机在“静止可暂停”状态;
  • 由输入/监听器触发下一次动画,而非持续运行。

Solo 的使用(Using Solos)

Solo 类似增强版分组,可在同级对象中实现“单选显示”。

  • 适用于角色换装、状态切换等;
  • 比逐个调透明度更高效;
  • 未激活对象可减少计算与渲染开销。

混合状态(Blend States)

启用混合状态后,状态机可能持续活跃。建议为混合状态设计明确退出路径,避免长期占用 CPU。

运行时考虑(Runtime Considerations)

外部资源加载(Out-of-band Assets)

参见:Loading Assets

通过代码动态加载并替换字体、图片、音频等资源,可实现:

  • 减小 .riv 二进制体积;
  • 多文件复用资源;
  • 预加载 + 缓存提升首屏体验;
  • 按设备分辨率动态切换资源。

缓存 .riv(Caching your .riv)

若同一 .riv 在多个位置重复使用,建议缓存已解析文件并复用,可显著降低重复解析与解码成本。

程序化暂停(Pausing Programmatically)

建议在以下场景主动调用运行时 pause

  1. 动画离开视口暂时不可见;
  2. 用户开启“减少动态效果(reduced motion)”;
  3. 状态机处于静态空闲状态。

当需要恢复时再调用 play

低端设备策略(Low-end Devices)

在资源受限设备上可提供简化版动画方案:

  • 减少同时播放实体数量;
  • 降低复杂混合与高频特效;
  • 必要时以静态展示替代自动播放;
  • 通过备用画板/状态机按设备能力动态切换。