跳到主要内容
中文系列课

迁移指南

从 @rive-app/webgl 迁移到 @rive-app/webgl2​

我们强烈建议迁移到 @rive-app/webgl2，以在大多数情况下获得最佳渲染质量和性能。@rive-app/webgl 包已弃用，在 v2.37.0 之后不再接收更新。

迁移过程包括更新你的包安装和导入语句，以使用 @rive-app/webgl2 而不是 @rive-app/webgl。没有破坏性的 API 更改，因此你现有的代码应该无需修改即可与新包一起工作。

例如，如果你之前使用：

npm install @rive-app/webgl
import { Rive } from '@rive-app/webgl';

你可以将其更新为：

npm install @rive-app/webgl2
import { Rive } from '@rive-app/webgl2';

此更改将使你能够利用 Rive 渲染器的改进渲染能力，同时保持与现有代码库的兼容性。

从 v1 迁移到 v2​

从我们的 Web (JS) 运行时的 v2 开始，Rive 将在运行时支持 Rive 文本，包括以下包：

  • Web (JS) / WASM
  • @rive-app/canvas
  • @rive-app/canvas-advanced
  • @rive-app/canvas-single
  • @rive-app/webgl2

重大变更​

没有破坏性 API 更改！

虽然没有为运行时发布包含破坏性 API 更改的新大版本，但 v2 的发布是由于包中包体积的增加。原因是为驱动 Rive 的 Web Assembly (WASM) 构建添加了新的内部依赖，特别是为了支持强大的 Rive 文本功能。你可能会发现，在从 v2.0.0 开始加载 Rive 时，对 WASM 文件的请求大约为 ~261kb brotli 压缩后的大小。

如果你正在寻找不包含 Rive 文本/布局/音频/脚本功能的精简版本，可以查看 @rive-app/canvas-lite。

从 rive.js 迁移​

此前，Web 运行时会部署到 npm 上的 rive-js 包。此后，我们已经从这种单一包模型转变，现在你可以根据你的 API/渲染级别需求从多个不同的包中导入。

  • @rive-app/webgl2
  • @rive-app/canvas
  • @rive-app/canvas-advanced

除了这些新包之外，还有一个 @rive-app/canvas-single 包，它将 WASM 编码在 JS 中。更多详情，请参见 canvas vs webgl2。

我们改变了包模型，以便可以选择使用哪个渲染器（即 CanvasRenderingContext2D 与 WebGL2），从而影响包大小和性能。此外，所有新的 Web 运行时包都将支持最新的 Rive 功能，例如位图资源。

在任何情况下，就使用 rive 实例而言，高级 API 使用无需更改。你只需要更改在项目中安装的包以及你导入它的相关位置。

例如，替换以下集成：

npm i rive-js
import rive from 'rive-js';

const foo = new rive.Rive({
src: "https://cdn.rive.app/animations/vehicles.riv",
});

你可以将其替换为：

npm i @rive-app/webgl2
import {Rive} from '@rive-app/webgl2';

const foo = new Rive({
src: "https://cdn.rive.app/animations/vehicles.riv",
});

或者，你可以将 @rive-app/webgl2 替换为适合你需求的任何新的 Web 运行时包输出。