Rive-WASM 开源项目使用手册

2024-08-16 15:53:57作者：吴年前Myrtle

rive-wasm

Wasm/JS runtime for Rive

1. 项目目录结构及介绍

Rive-WASM 是一个基于 WebAssembly 的 Rive 动画引擎实现，它允许在网页端高效地播放和控制 Rive 格式的动画文件。以下是该仓库的基本目录结构及其简介：

src: 包含核心的 WASM 模块源代码以及 Rust 语言编写的业务逻辑，用于编译生成 WebAssembly 文件。
example: 示例应用目录，提供了如何集成 Rive-WASM 到实际项目的简单示例。
- index.html: 示例页面入口，展示如何在网页上加载并播放 Rive 动画。
- main.js: JavaScript 代码，用于初始化 Rive 库，加载动画文件和控制动画播放。
Cargo.toml: Rust 项目的配置文件，定义了依赖项、版本号和构建指令。
README.md: 项目快速入门指南，包含安装说明和基本使用案例。
.gitignore: 版本控制系统忽略的文件列表。

2. 项目的启动文件介绍

在 example 目录下的 index.html 可视为启动文件，这是用户互动的前端界面。虽然这个“启动”更多指的是演示和测试环境，但它展示了如何将 Rive-WASM 集成到Web应用中。通过在浏览器环境中运行这段HTML，你可以看到一个简单的动画实例运行效果。关键部分包括创建 <canvas> 元素以显示动画，以及通过JavaScript脚本来实例化 Rive 对象并加载动画文件。

<!-- index.html简化版 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 引入Rive的WASM和JS绑定 -->
    <script src="path/to/rive-wasm.js"></script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        // 实例化并加载动画
        const rivFile = new Rive.File('path/to/your.riv');
        rivFile.load().then(() => {
            // 创建并附加到canvas
            const rivCanvas = new Rive.Canvas('#canvas', rivFile);
            // 开始播放动画等操作
            rivCanvas.animation('animationName').play();
        });
    </script>
</body>
</html>

3. 项目的配置文件介绍

Cargo.toml

Cargo.toml 是 Rust 项目的主配置文件，决定了项目的名称、版本、作者信息、依赖库以及构建指令。以下是一些主要字段的解释：

[package]
name = "rive-wasm"
version = "x.y.z"
edition = "2018"

[dependencies] # 这里列出所有Rust代码所需的外部库。
rivet = { path = "../rive-rs" } # 假设rive-rs是内部使用的另一个Rust库。

[[bin]]
name = "rive-wasm-example" # 示例程序可选，如果项目包含命令行工具或示例。

[lib]
crate-type = ["cdylib", "rlib"] # 指定生成动态链接库和库文件，以便于WebAssembly编译。

[features]
default = ["wasm-bindgen"] # 特性标志，常用于启用特定的编译选项，如绑定到Web。