选择渲染器

Rive 运行时可以通过 Rive 渲染器 进行渲染，或者在某些运行时中，使用平台特定的渲染器，例如 Canvas2D、Skia 或 Impeller。

Rive 渲染器旨在跨所有平台提供更好的性能和视觉保真度。它利用现代图形 API 和技术，为 Rive 图形提供高质量渲染。

某些 Rive 功能（包括矢量羽化）需要 Rive 渲染器。

有关更多信息，请参阅 功能支持。

渲染器默认值

运行时	默认渲染器	选项
Web (JS)	取决于包	Rive / Canvas2D
Web (React)	取决于包	Rive / Canvas2D
Apple	Rive	Rive
Android (Compose)	Rive	Rive
Android (Legacy)	Rive	Rive / Canvas / Skia（自 v10.0.0 起移除）
React Native	Rive	Rive
Flutter	无默认值	Rive / Flutter Skia / Flutter Impeller

运行时设置

只有部分运行时需要您选择或配置渲染器。以下部分涵盖了通过包、初始化选项或工厂设置公开渲染器设置的运行时。

如果某个运行时未在此处列出，则无需配置渲染器设置。它将自动使用该运行时支持的渲染器。

📌 Web (JS)

Web 运行时提供多个具有相同核心 API 的包。根据您要使用的渲染器选择包。

包	渲染器	使用场景
@rive-app/webgl2	Rive	您希望获得对 Rive 渲染器功能和渲染保真度的最佳支持。
@rive-app/canvas	Canvas2D	您屏幕上有多个 Rive 实例，希望使用稍小的包，或者不需要仅 Rive 渲染器支持的功能。
@rive-app/canvas-lite	Canvas2D	您想要最小的 Canvas2D 包，并且不需要完整的 Canvas2D 运行时功能集。

📌 Web (React)

Web 运行时提供多个具有相同核心 API 的包。根据您要使用的渲染器选择包。

包	渲染器	使用场景
@rive-app/react-webgl2	Rive 渲染器	您希望获得对 Rive 渲染器功能和渲染保真度的最佳支持。
@rive-app/react-canvas	Canvas2D	您屏幕上有多个 Rive 实例，希望使用稍小的包，或者不需要仅 Rive 渲染器支持的功能。
@rive-app/react-canvas-lite	Canvas2D	您想要最小的 Canvas2D 包，并且不需要完整的 Canvas2D 运行时功能集。

这些包提供 Rive React 组件和 hooks。如果您想在 React 应用中使用命令式 JavaScript 运行时，请安装其中一个 Web JavaScript 包，例如 @rive-app/webgl2、@rive-app/canvas 或 @rive-app/canvas-lite。

📌 Apple

Apple 运行时使用 Rive 渲染器。在 Swift Concurrency API 中，你可以在创建 worker 时为其选择启用 GPU Canvas：

let worker = try await Worker(
    configuration: .init(enableGPUCanvas: true)
)

渲染 3D 内容需要 GPU Canvas。该设置对该 worker 加载的每一个 File 以及由这些文件创建的每一个 Rive 对象生效，并且在 worker 的生命周期内不可更改。

📌 Android (Legacy)

选项：Canvas / Skia（自 v10.0.0 起移除）

在 XML 中指定渲染器目标：

<app.rive.runtime.kotlin.RiveAnimationView
app:riveRenderer="Rive"
… />

或者，在初始化 Rive 时：

Rive.init(applicationContext, defaultRenderer = RendererType.Rive)

📌 Flutter

Rive 渲染器自 0.14.0 起在 Flutter 运行时中可用。使用最新版本（0.14.11）的 rive 包以获得最新的修复和改进。

Rive 渲染器通过 rive_native 公开，它作为 rive 包的依赖项包含在内。有关更多信息，请参阅 Rive Native。

在创建 Rive File 或 FileLoader 时，您需要指定要使用的工厂：

• Factory.rive 用于 Rive 渲染器
• Factory.flutter 用于 Flutter 渲染器（Skia 或 Impeller）

    // Rive 渲染器
    File.asset("assets/vehicles.riv", riveFactory: Factory.rive)
    // Flutter 渲染器
    File.asset("assets/vehicles.riv", riveFactory: Factory.flutter)

您可以为应用中的不同图形使用不同的渲染器。

选择渲染器时的一些考虑因素：

• 如果您计划显示许多 Rive 图形，并且这些图形都绘制到不同的 Rive widget 上，请考虑使用带有 Factory.rive 的 RivePanel 将多个图形绘制到同一纹理，以减少分配原生渲染目标和纹理的开销。或者使用 Factory.flutter。
• 如果您要显示复杂图形，请考虑使用 Factory.rive 以利用 Rive 渲染器的优化。
• 矢量羽化仅在使用 Factory.rive 时可用，因此如果您需要该功能，请使用 Rive 渲染器。