跳到主要内容
中文系列课

选择渲染器

Rive 根据平台和运行时使用各种不同的渲染器。我们正在努力通过 Rive 渲染器统一所有平台/运行时使用的默认渲染器。

⚠️ 警告： 某些功能（如矢量羽化）仅通过 Rive 渲染器支持。更多信息请参阅我们的功能支持页面。

渲染器选项与默认值​

要使用特定的渲染器，请参阅指定渲染器。

下表列出了 Rive 各运行时可用的渲染器及其默认值：

运行时默认渲染器选项
AndroidRiveRive / Canvas / Skia（自 v10.0.0 起已移除）
AppleRiveRive
React NativeRive参见 Apple 和 Android
Web (Canvas)Canvas2DCanvas2D
Web (WebGL2)RiveRive
Flutter无默认值Rive / Flutter（Skia / Impeller）

Rive 渲染器​

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

它还使 Rive 能够创新新功能，例如矢量羽化，这些功能仅通过 Rive 渲染器支持。更多信息请参阅我们的功能支持页面。

Apple​

起始版本​

Rive 渲染器自 v6.0.0 起成为 Apple 运行时的默认渲染器，但我们建议安装最新版本的依赖项以获取最新更新。有关最新版本的详细信息，请参阅 CHANGELOG。

性能​

与之前的默认渲染器相比，Rive 渲染器在动画播放过程中的内存使用方面在 Apple 运行时上表现最佳。

RiveRuntime（当前运行时）：

Rive 渲染器是 Apple 运行时的唯一渲染器。

该渲染器按每个 Worker 对象进行多线程处理。这意味着对于每个 Worker 对象，都会创建一个新线程来处理和渲染 Rive 图形。

RiveRuntime（旧版运行时）：

在 UIKit 中，你可以通过在单个 RiveView 上多次绘制来看到最佳性能差异，而不是创建多个 RiveView 实例或多个 RiveViewModel。

示例： 参见此压力测试示例，了解如何重写 RiveView 上的绘制函数，在同一个视图上多次绘制，每个图形带有偏移。你可以通过上述配置切换渲染器，自行测试性能！

Android​

起始版本​

Rive 渲染器自 v10.0.0 起成为 Android 运行时的默认渲染器。但我们建议安装最新版本的依赖项以获取最新更新。有关最新版本的详细信息，请参阅 CHANGELOG。

Web (JS)​

起始版本​

Rive 渲染器自 v2.11.1 起在 Web (JS)/WASM 运行时中引入，使用以下包：

  • @rive-app/webgl2

但我们建议安装最新版本的依赖项以获取最新更新。

此包不捆绑重量级渲染器依赖项（如 Skia），有助于保持较小的包体积。

启用草案扩展​

在 Web 上，在 Chrome 中启用 WebGL 草案扩展可以改善 @rive-app/webgl2 的渲染性能。

在没有该扩展（或不支持该扩展的浏览器上），@rive-app/webgl2 会回退到基于 MSAA 的 WebGL2 路径。我们正在积极与浏览器供应商合作，使其默认启用。

与其他 Web (JS)/WASM 运行时相比，API 使用方式没有变化。

React Native​

起始版本​

在 v7.1.0 中引入了轻松配置默认渲染器的选项。对于 React Native，需要同时为 iOS 和 Android 设置默认渲染器。

选项：

  • Apple：Rive（默认）、CoreGraphics
  • Android：Rive（默认）、Canvas

有关渲染器和回退的更多信息，请参阅 Apple 和 Android 部分。

Flutter​

⚠️ 警告： Rive 渲染器暂不支持通过 Flutter 在 Linux 上使用。

起始版本​

Rive 渲染器在 Flutter 运行时的 0.14.0 版本中添加。但我们建议安装最新版本的依赖项以获取最新更新。它通过 rive_native 包暴露，该包是主 rive 包的依赖项。在此处了解更多关于 Rive Native 的信息。

指定渲染器​

请参阅以下各运行时的说明来启用特定渲染器。

Apple​

入门​

选项：Rive（默认）/ Core Graphics / Skia（在 v6.0.0 中已弃用）

以下是在 UIKit 和 SwiftUI 中配置渲染器的一些说明。

UIKit​

在应用程序启动期间设置全局渲染器类型：

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true
    }

    ...
}
SwiftUI​

新的 SwiftUI 应用程序通过 App 协议启动，但你仍然可以添加 UIApplicationDelegate 功能。

iOS​

创建一个名为 AppDelegate 的新文件和类，包含设置 defaultRenderer 为 RendererType.riveRenderer 的代码行：

import UIKit
import Foundation
import RiveRuntime

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true
    }
}

接下来，在应用程序的入口点，使用 UIApplicationDelegateAdaptor 将上面创建的 AppDelegate 设置为应用程序代理。

@main
struct MyRiveRendererApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
macOS​

创建一个名为 AppDelegate 的新文件和类，包含设置 defaultRenderer 为 RendererType.riveRenderer 的代码行：

import Foundation
import RiveRuntime

class AppDelegate: NSObject, NSApplicationDelegate {
    func application(_ application: NSApplication, applicationDidFinishLaunching notification: Notification) -> Bool {
        RenderContextManager.shared().defaultRenderer = RendererType.riveRenderer
        return true

接下来，在应用程序的入口点，使用 NSApplicationDelegateAdaptor 将上面创建的 AppDelegate 设置为应用程序代理。

@main
struct MyRiveRendererApp: App {
    @NSApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Android​

入门​

选项：Rive（默认）/ Canvas / Skia（在 v10.0.0 中已移除）

在 XML 中指定渲染器目标：

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

或者，在初始化 Rive 时：

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

Web (JS)​

@rive-app/webgl2 包仅使用 Rive 渲染器，因此无需额外配置即可默认使用。

要开始使用，请参阅上文中关于启用草案扩展的部分。

React Native​

对于 React Native，需要同时为 iOS 和 Android 设置默认渲染器，使用 RiveRenderer.defaultRenderer 并传入 RiveRendererIOS 和 RiveRendererAndroid 的枚举值。

  • iOS 选项：Rive（默认）/ CoreGraphics
  • Android 选项：Rive（默认）/ Canvas
export default function Main() {
useEffect(() => {
    RiveRenderer.defaultRenderer(
    RiveRendererIOS.Rive,
    RiveRendererAndroid.Rive
    );
}, []);

return <App />;
}

Flutter​

在创建 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 widget 的 Rive 图形，考虑使用带有 Factory.rive 的 RivePanel 将多个图形绘制到同一纹理上，以减少分配原生渲染目标和纹理的开销。或者使用 Factory.flutter。
  • 如果你显示的是复杂图形，考虑使用 Factory.rive 来利用 Rive 渲染器的优化。
  • 矢量羽化仅支持 Factory.rive，如果需要该功能，请使用 Rive 渲染器。

Flutter 渲染注意事项​

Impeller 正逐步取代 Skia，成为所有平台的默认渲染器。因此，在使用 Impeller 渲染器的平台上使用 Rive Flutter 运行时时，可能会出现之前未出现的渲染和性能差异。如果你在运行时遇到与 Rive 编辑器中预期行为相比的任何视觉或性能错误，建议尝试以下步骤进行排查：

  1. 尝试使用 --no-enable-impeller 标志运行 Flutter 应用，以使用 Skia 渲染器。如果使用 Skia 时视觉差异不出现，则可能是 Impeller 的渲染 bug。但在向 Flutter 团队报告 bug 之前，请先尝试下面的第二步👇
flutter run --no-enable-impeller
  1. 尝试在最新的 master 频道上运行 Flutter 应用。某些视觉 bug 可能在最新的 Flutter 提交中已修复，但尚未在 beta 或 stable 频道中发布。
  2. 如果你在最新的 master 分支上仍然仅在使用 Impeller 渲染器时看到视觉差异，建议向 Flutter GitHub 仓库提交详细的问题报告，附带可复现的示例以及其他有助于团队调试可能存在的问题的相关细节。