跳到主要内容
中文系列课

缓存 Rive 文件（Caching a Rive File）

为什么要缓存？​

多数场景下 .riv 加载足够快，不必过早优化。
但当同一文件在多处反复使用时，缓存会明显减少重复开销。

典型场景：

  • 同屏多个 Rive 实例
  • 跨页面复用同一个动画文件
  • 网络文件反复下载与解码

收益​

  • 减少重复 IO / 解码 / 解析
  • 降低内存抖动
  • 提高首屏后交互稳定性

通用策略​

  1. 在上层（页面级/模块级）加载一次
  2. 向下传递同一个 RiveFile/File 引用
  3. 在生命周期结束时集中释放

Flutter​

Flutter 需要你显式管理对象生命周期。

late File riveFile;

@override
void initState() {
  super.initState();
  init();
}

Future<void> init() async {
  riveFile = (await File.asset('assets/rewards_demo.riv', riveFactory: Factory.rive))!;
}

@override
void dispose() {
  riveFile.dispose();
  super.dispose();
}

多个 RiveWidget 可共享同一 riveFile。

React​

可通过 useRiveFile 先加载，再分发到多个组件：

const { riveFile, status } = useRiveFile({ src: '/public/my.riv' });

子组件用同一 riveFile 创建各自实例。

React Native（新版）​

useRiveFile 返回的 riveFile 可给多个 RiveView 复用：

const { riveFile } = useRiveFile(require('./rating.riv'));

<RiveView file={riveFile} />
<RiveView file={riveFile} />

Web​

可先预加载 RiveFile，后续多个 Rive 实例复用该对象，避免重复拉取。

Apple / Android​

都可持有文件对象强引用做缓存。
重点是：明确释放时机。

  • Apple：缓存 File，按需创建独立 artboard/stateMachine 实例
  • Android（Legacy）：注意 File.release() 的引用计数语义

注意事项​

  1. 已释放对象不可再次使用
  2. 缓存策略要和状态管理同步（全局缓存 vs 局部缓存）
  3. 网络场景建议配合 HTTP 缓存 / CDN cache-control
  4. 若内存敏感，优先缓存热点文件，不要“全量常驻”

相关文档​