跳转至

Rive Early Access 数据绑定教程：创建动态加载条#

前言#

大家好！我想为大家创建一个关于 Rive 的实用示例。我知道早期访问版本刚刚发布，如果你和我一样，可能对一些功能的工作原理还有疑问。

虽然官方教程很棒，但在实际应用中仍然留下了很多问题。因此，我想分享这个教程，希望能帮助大家更好地理解数据模型、视图模型的工作原理，以及如何在实际项目中将它们绑定在一起。

项目概述#

我们将创建一个动态加载条示例，并使用映射范围（mapping range）功能。这个功能我花了很多时间摸索才理解，因为目前还没有相关教程。我会先展示完成的示例，然后详细讲解实现过程。

完成效果预览#

在示例的顶部，我们有一个标准的加载器：
- 最小值（Min）：0
- 最大值（Max）：100
- 一个进度条
- 当前值显示

绿色部分的宽度会根据当前值来调整。如果最小值是0，最大值是100，那么当前值为50时，绿色部分应该占据整个背景条的一半宽度。

插值动画的优势#

通过插值功能，我们可以实现平滑的动画效果。这非常棒，因为以前我需要在代码中实现这些效果，非常麻烦。现在在 Rive 中，你可以直接在编辑器中添加插值，让设计师拥有更好的控制权。

我们还可以创建响应式加载器，这也很棒。让我演示一下它的工作原理。

核心功能演示#

在我们的视图模型中，我们有：
- 绑定到进度条的颜色属性
- 当前值
- 最大值
- 最小值

当我修改当前值时，所有的加载器都会相应更新。如果我快速调整，你会注意到带有插值的加载器会更加平滑地动画，这种缓动效果非常棒。

这个功能的强大之处在于，你可以在运行时将这些数值改为任何值，这对我们来说非常重要。比如，如果我想将最大值从100改为150，当前值设为50时，它应该只占据加载器的三分之一。

实现步骤#

第一步：创建视图模型#

首先，我们需要创建一个视图模型，命名为"loader"。我们需要设置以下属性：

  1. 数字属性：
  2. Min（最小值）
  3. Current（当前值）

  4. Max（最大值）

  5. 颜色属性：

  6. Bar（进度条颜色）

第二步：绑定艺术板#

重要提醒：你必须将艺术板绑定到视图模型！点击艺术板上的"C"，你会看到数据绑定属性。如果不绑定到刚创建的视图模型，后续的操作都不会生效。

第三步：数据绑定#

有两种绑定数据的方法：

方法一：拖拽绑定#

  1. 在层级面板中选择文本运行
  2. 回到数据面板，找到Min数字属性
  3. 点击并拖拽小波浪线图标到输入框
  4. 释放完成绑定

方法二：右键菜单#

  1. 直接在输入框上右键
  2. 选择"数据绑定"选项
  3. 在菜单中选择要绑定的属性

第四步：添加转换器#

关键点：数字不能直接用于文本运行，文本运行只接受字符串类型。因此我们需要添加转换器。

  1. 创建一个"转换为字符串"的转换器
  2. 将数字值转换为字符串类型
  3. 设置小数位数和是否移除尾随零

现在绑定应该变成绿色，表示绑定成功。

第五步：配置进度条#

对于进度条本身，我们需要：

  1. 设置原点：确保原点在加载器开始的一侧，否则缩放会从错误的位置开始
  2. 绑定缩放属性：将当前值绑定到进度条的缩放属性
  3. 自动归一化：系统会自动创建归一化转换器

第六步：实现范围映射#

为了支持动态范围（比如最大值从100变为150），我们需要使用范围映射：

  1. 创建转换器组：
  2. 添加现有的归一化转换器

  3. 添加新的"映射范围"转换器

  4. 配置映射范围：

  5. 输入范围：绑定到Min和Max值

  6. 输出范围：设置为0到100（对应0%到100%的缩放）

  7. 应用到所有进度条：将所有进度条的绑定更新为使用转换器组

第七步：添加插值动画#

为了实现平滑动画效果：

  1. 复制转换器组，重命名为"带插值的转换器组"
  2. 添加"基于时间的数值插值器"
  3. 配置缓动参数（可以使用默认设置）
  4. 将需要动画效果的进度条绑定到这个新的转换器组

第八步：条件逻辑（可选）#

我们可以添加条件逻辑来处理特殊情况：

  1. 创建额外的时间轴：
  2. 默认状态（绿色）
  3. 超出最大值状态（红色）

  4. 低于最小值状态（红色）

  5. 设置条件：

  6. 如果当前值 > 最大值 → 切换到"超出"状态
  7. 如果当前值 < 最小值 → 切换到"不足"状态

  8. 否则 → 保持默认状态

  9. 添加过渡动画：可以为状态切换添加300毫秒的淡入效果

技术要点总结#

数据绑定流程#

数据模型 → 视图绑定 → 类型转换 → 范围映射 → 视觉呈现 → 动画效果

关键概念#

  • 视图模型：包含所有数据属性的中心化管理
  • 转换器：处理数据类型转换和数值映射
  • 范围映射：将任意数值范围映射到视觉表示范围
  • 插值：实现平滑的动画过渡效果
  • 条件逻辑：根据数值状态改变视觉表现

最佳实践#

  1. 始终将艺术板绑定到视图模型
  2. 使用转换器处理类型不匹配问题
  3. 通过范围映射实现动态数值范围
  4. 利用插值创建平滑动画效果
  5. 设置正确的原点位置以确保缩放效果

结语#

这个教程展示了 Rive Early Access 中数据绑定功能的强大能力。通过这些技术，设计师可以创建完全动态的、响应式的加载器，而无需编写任何代码。

希望这个教程能帮助大家更好地理解和使用 Rive 的新功能。如果你需要示例文件，可以在相关社区或平台上联系我。

由于目前相关教程还不多，我希望这个分享能对大家有所帮助。祝大家周五愉快，期待在下一个教程中见到大家！