利用数据绑定让动画更智能：在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智能小助手）
公众号二维码
