Web (JS) | RiveCN - Rive 中文站

📄️ 入门指南

⚠️ 注意：某些 Rive 功能可能尚未被特定运行时支持，或者需要使用 Rive 渲染器。详情请参考功能支持和选择渲染器页面。

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

⚠️ 弃用通知：本页文档记录了旧的动画播放系统。对于新项目：请改用状态机。对于现有项目：计划尽快从直接动画控制迁移到状态机。此内容仅供旧版支持参考。

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

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

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

适配模式

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

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

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

运行时替换数据绑定字体

⚠️ 弃用通知：本页文档记录了旧的输入系统。对于新项目：请改用数据绑定。对于现有项目：计划尽快从输入迁移到数据绑定。此内容仅供旧版支持参考。

⚠️ 弃用通知：本页文档记录了旧的事件系统。对于新项目：请改用数据绑定。对于现有项目：计划尽快从事件迁移到数据绑定。此内容仅供旧版支持参考。

⚠️ 已弃用：推荐使用数据绑定（Data Binding）替代直接操作文本运行。

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

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

背景

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

关注点

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

Rive 实例的 API 文档。

面向 Rive 的 JavaScript/WASM 运行时。