跳到主要内容

加载资源

在运行时动态加载和替换资源。

在加载 Rive 文件后,当资源(图片、字体和音频)未嵌入 .riv 文件中时,你需要自行处理和加载它们,以便它们能正确显示。

Rive 文件包含对资源的引用,这些资源可以以下列方式之一存储:

内嵌资源​

内嵌资源直接存储在 .riv 文件中,不需要任何干预即可工作。这是 Rive 文件资源加载方式的默认设置。

通过 CDN 加载​

引用资源是配置为通过 Rive CDN 加载的资源。在编辑器中选择"通过 Rive CDN 加载"。

图片 CDN​

图片资源可以通过 Rive 编辑器中的"使用 Rive 图片 CDN"设置配置为通过 CDN 加载。

引用资源​

引用资源是在 Rive 编辑器中配置为通过 URL 加载的资源。运行时将像处理任何其他 URL 加载一样处理这些资源。

处理资源​

Rive 尝试自动加载资源,但也提供了 Asset Handler API,让你可以完全控制资源的加载和处理方式。

示例​

使用 Asset Handler API​

在实例化 File 时,向参数列表中添加一个 assetLoader 回调。运行时在加载 .riv 文件时检测到的每个资源都会调用此回调,此回调负责处理运行时资源的加载,或者将责任传递并让运行时尝试以其他方式加载。

final fontFile = await File.asset(
'assets/acqua_text_out_of_band.riv',
riveFactory: Factory.rive,
assetLoader: (asset, bytes) {
// 替换未内嵌在 rive 文件中的字体资源
if (asset is FontAsset && bytes == null) {
final urls = [
'https://cdn.rive.app/runtime/flutter/IndieFlower-Regular.ttf',
'https://cdn.rive.app/runtime/flutter/comic-neue.ttf',
'https://cdn.rive.app/runtime/flutter/inter.ttf',
'https://cdn.rive.app/runtime/flutter/inter-tight.ttf',
'https://cdn.rive.app/runtime/flutter/josefin-sans.ttf',
'https://cdn.rive.app/runtime/flutter/send-flowers.ttf',
];

// 从字体 URL 列表中随机选择一个
http.get(Uri.parse(urls[Random().nextInt(urls.length)])).then((res) {
if (mounted) {
asset.decode(
Uint8List.view(res.bodyBytes.buffer),
);
setState(() {
// 强制重建,以防 Rive 图形不再推进
});
}
});
return true; // 告诉运行时不要自动加载该资源
} else {
// 告诉运行时继续尝试加载该资源(如果存在)
return false;
}
},
);

你提供的回调将接收 asset 和 bytes 参数。

  • asset - FileAsset 对象的引用。你可以从此对象获取许多属性,如名称、资源类型等。你还会用它为动态加载的内容设置新的 Rive 特定资源。类型:FontAsset、ImageAsset 和 AudioAsset。
  • bytes - 资源的字节数组(如果作为内嵌资源可用)

重要提示:注意返回值是一个 boolean,你需要返回:

  • true 如果你打算自行处理并加载资源
  • 或 false 如果你不想自行处理该资源的加载,并尝试让运行时加载该资源

⚠️ 警告:一旦 File 被释放,FileAsset 将不再有效,使用它将有风险。

资源​

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群