Web (JS) | RiveCN - Rive 中文站

📄️ 快速开始

面向 Rive 的 JavaScript/WASM 运行时。

Rive 的 Web 运行时有两个主要包：@rive-app/webgl2 和 @rive-app/canvas。它们暴露相同的 API。唯一的区别是绘制方式。

Rive 实例的 API 文档。

有关在 Rive 编辑器中创建画板的更多信息，请参考画板。

适配模式

有关在 Rive 编辑器中设计和构建状态机的更多信息，请参考状态机概述。

在使用运行时数据绑定 API 之前，请先熟悉概述中介绍的核心概念。

如果你想动态替换图像，请使用图像数据绑定。

运行时替换数据绑定字体

通过在 Web (JS) 运行时中启用语义，让你的 Rive 图形可被屏幕阅读器访问。

在 Web (JS) 运行时中，让用户用 Tab 和方向键在 Rive 图形中移动焦点。

在 Web (JS) 运行时中，把页面上的输入文字和按键传递给你的 Rive 图形。

在 Web 上为 Rive 实例启用 GPU Canvas，以渲染 3D 与着色器内容。

在页面加载时优化 Rive 动画的加载

在大多数情况下，.riv 文件应该可以快速加载，手动管理 RiveFile 并非必要。但如果你打算在应用的多个部分中使用同一 .riv 文件，甚至在同一屏幕上使用，将文件加载一次并保留在内存中可能会更有优势。

要了解如何向 Rive 文件添加音频的更多信息，请参见音频事件。

背景

4 个项目

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

关注点