利用数据绑定让动画更智能：在 Rive 中创建动态黄金计算器

设计能够响应实时数据或用户输入的视觉效果通常需要在多个工具之间切换——一个用于动画，一个用于逻辑，另一个用于实现。这种来回切换会减慢迭代速度，使小修改变得繁琐，并在设计和行为之间造成脱节。

如果你使用过 Rive，就知道它是为了弥合这一差距而构建的。它允许你在一个地方完成设计、动画和交互添加——借助状态机和数据绑定等功能，你可以让动画直接响应变量和用户操作。

为了演示如何在 Rive 中使用数据绑定，我们构建了一个小型交互项目——一个黄金计算器。任务很简单：计算 1 到 6 根 5 克和 10 克金条的价格，使用外部数据获取当前每克黄金价格。黄金价格可以是动态的，通常来自市场数据，但在这里我们使用了手动设置的值。

让我们逐步分解计算器的构建过程，从文件的布局和结构开始。

1. 文件结构

布局是为移动设备设计的，使用 440×900 像素的画板。它围绕三个布局组构建：

• 标题（包含每克黄金价格）

• 控制选项（选择金条数量和重量）

• 金条插图

标题部分包括一个由两个文本行组成的文本布局：一个包含静态文本（如标签），另一个是动态的，并使用数据绑定连接到外部数据。这使得黄金价格在数据变化时能够实时更新。

在控制部分，我们添加了加减按钮来设置金条数量。这些是包含图标的简单布局。在它们下方，有两个按钮用于在 5 克和 10 克选项之间切换。它们被设计为圆角布局，内部包含文本。

在状态机中，两个时间线定义了标签状态：一个用于 10 克按钮激活时，使用纯黑色背景和白色文本；另一个用于 5 克，样式相反。切换这两个状态会视觉上更新活动标签。

总价部分也使用两个文本行——一个用于货币图标，另一个用于总价值。该值基于所选重量和数量变化，并由数据绑定驱动。

2. 金条插图

插图使用嵌套画板构建，其中包含一个矢量金条。在计算器布局中，我们复制了这个画板，根据用户选择显示 1 到 6 根金条。

由于有两种重量选项，我们让金条在视觉上调整大小——10 克更宽，5 克更窄。为此，我们使用了 N-Slices，使边缘保持完整，只有中间部分拉伸。切片组位于固定大小的布局内，画板设置为 Hug 其内容，使其自动调整大小。

创建了两个时间线来控制金条大小：一个宽度为 88 像素（10 克），另一个为 74 像素（5 克）。它们之间的切换由一个名为 Size-gram gold 的数字变量控制，其中 5 克表示为 0，10 克表示为 1（默认值为 1）。

在状态机中，我们将此变量连接到两个时间线（10 克时间线为默认值）——当设置为 0 时，布局切换到 5 克；当设置为 1 时，切换到 10 克。这使得大小基于用户选择更新，无需手动切换。为了保持过渡平滑，添加了 150 毫秒的动画持续时间。

3. 可视化 1-6 根金条

为了在主计算器布局中显示不同数量的金条，我们使用三个垂直间隔为-137 的堆叠布局组创建了一个分层结构。每一层都垂直偏移，形成一个简单的金字塔排列，所有内容都定位在屏幕的左下角。

第一层包含三个复制的嵌套画板（单根金条）。每个都包裹在一个 Hug 布局中，使其能够根据重量正确调整大小。第二层包括两根金条和一个空布局。这个空布局用于间距——当需要显示恰好四根金条时，它会产生视觉偏移。顶层只有一根居中的金条。

所有三层都是底部居中的，这保持了金字塔形状的一致性，无论添加或删除多少金条。

为了控制显示多少根金条，我们在 Animate 模式下创建了 6 条时间线——每条对应 1 到 6 的数量。为了隐藏或显示每根金条，使用了两种技术：调整嵌套画板的不透明度（100%显示，0%隐藏）和修改包裹它的布局。当金条隐藏时，布局设置为固定宽度 0 像素；当显示时，使用 Hug 设置自动恢复其大小。

每条时间线根据应显示的金条数量有自己的设置组合。例如，在显示 4 根金条的时间线中，我们需要防止第四根金条跳到行中心。为了保持适当的间距，我们为用于偏移的空布局分配了 80 像素的固定宽度。在其他时间线上，同一布局通过设置宽度为 0 像素隐藏。

这个系统使得在保持视觉结构的同时，可以轻松切换数量。

4. 状态机和数据绑定设置

准备好视觉和布局后，我们开始用数据绑定和状态转换设置逻辑。

4.1 外部黄金价格

首先，我们创建了一个名为 Gold price gram 的数字变量。该值可以外部更新——例如连接到交易数据库——这样计算器始终显示黄金的当前市场价格。在我们的例子中，我们使用了静态值 151.75，用户也可以手动更新。

为了在 UI 中显示这一点，我们将标题布局中的 Text Run 2 绑定到此变量。然后在 Strings 选项卡中创建并应用了一个名为“Convert to String Price”的转换器到该文本行。此转换器正确格式化数字以供显示，稍后将重复使用。

4.2 金条大小控制

我们已经有一个名为 Size-gram gold 的数字变量，用于控制嵌套画板插图中金条的重量。

在 Listeners 面板中，创建了两个监听器。第一个针对 5 克标签，使用 Pointer Down 操作，并分配 Size-gram gold = 0。第二个针对 10 克标签，同样使用 Pointer Down 操作，分配 Size-gram gold = 1。

接下来，两条时间线（每条对应一个标签状态）被引入状态机。10 克时间线用作默认状态，添加了过渡：一条从 10 克到 5 克（当 Size-gram gold = 0 时），另一条回到 10 克（当 Size-gram gold = 1 时）。每条过渡持续 100 毫秒，以保持切换平滑。

4.3 金条数量

接下来，添加了另一个名为 Quantity-gold 的数字变量来跟踪所选金条数量。默认值设置为 1。在 Converters 下的 Numeric 中，创建了两个“Calculate”转换器——一个添加“+1”，另一个减去“-1”。

在 Listeners 面板中，加号按钮分配了一个操作：Quantity-gold = Quantity-gold，使用“+1”转换器。这样，点击加号按钮将计数增加 1。减号按钮同样操作，附加“-1”转换器。点击减号按钮将计数减少 1。

在状态机内部，连接了六条时间线来表示 1 到 6 的金条数量。每条过渡使用 Quantity-gold 值触发正确的时间线。

默认情况下，加号按钮会无限增加数值，但目标是将最大值限制为六根金条。在六根金条活动的时间线上，通过将其点击区域比例设置为 0 并降低其不透明度来禁用加号按钮，以创建“禁用”视觉状态。在所有其他时间线上，这些属性恢复为其活动值。

同样的逻辑应用于减号按钮，以防止数值低于 1。在显示一根金条的时间线上，按钮被禁用，其他时间线上恢复为活动状态。

4.4 总价逻辑

对于 5 克金条的价格，我们使用以下公式计算：总价 = 黄金价格每克 × 金条数量 × 5 在 Converters → Numeric 中，创建了一个名为 Total Price 5g Formula 的 Formula 转换器来计算总价。示例中如下：{{View Model Price/Gold price gram}}*{{View Model Price/Quanity-gold}}*5.0

由于我们需要将此数字显示为文本，Total Price 数字变量也被转换为字符串。为此，我们使用了现有的名为“Convert to String Price”的转换器。

为了同时使用这两个转换器，创建了一个名为 Total Price 5g Group 的转换器组，其中包括 Total Price 5g Formula 转换器和 Convert to String Price 转换器。

然后，通过将 Total Price 变量添加到 Property 字段并在 Convert 字段中选择 Total Price 5g Group，对价格变量的文本进行数据绑定。

为了处理 10 克的情况（价格翻倍），我们探索了两个选项——要么创建一个乘以 10 的新转换器，要么将现有结果乘以 2。

最终，添加了第二个文本元素以及一个专门为 10 克设计的新转换器组。这包括一个新公式：总价 = 黄金价格每克 × 金条数量 × 10

创建了一个公式转换器和一个包含该公式和字符串转换器的组，命名为“Total Price 10g Group”。

使用 5 克和 10 克按钮处于活动状态的时间线，我们调整了文本元素的透明度。这样，当选择 5 克按钮时，显示连接到 5 克转换器组的总价；当选择 10 克按钮时，显示来自 10 克转换器组的价格。

效果完美。完成此设置后，Gold price gram 变量可以连接到实时外部数据，使计算器中的黄金价格能够实时反映当前市场价值。

总结

这个黄金计算器项目是一个简单的例子，但它展示了如何在 Rive 中使用数据绑定将视觉设计与实时逻辑连接起来——无需在单独的工具之间切换或编写自定义代码。通过结合状态机、变量和转换器，你可以构建不仅具有动画效果，而且智能且响应迅速的界面。

无论你是在开发产品 UI、原型还是独立的交互图形，Rive 都提供了一种将动作和行为融合在一个空间中的方法。如果你已经在尝试 Rive，数据绑定将为你打开一个全新的可能性层面。更多精彩内容 请关注我的个人公众号 公众号（办公 AI 智能小助手）公众号二维码

办公AI智能小助手