利用数据绑定让动画更智能：在Rive中创建动态黄金计算器
项目概述
设计能够响应实时数据或用户输入的视觉效果通常需要在多个工具之间切换——一个用于动画，另一个用于逻辑，还有一个用于实现。这种来回切换会减慢迭代速度，使小改动变得繁琐，并在设计与行为之间造成脱节。
Rive旨在弥合这一差距。它允许您在一个地方进行设计、动画制作和添加交互——借助状态机和数据绑定等功能，您可以让动画直接响应变量和用户操作。
为了演示如何在Rive中使用数据绑定，我们构建了一个小型交互式项目——黄金计算器。任务很简单：使用外部数据（当前每克黄金价格）计算1到6根5克和10克金条的价格。黄金价格可以是动态的，通常来自市场数据，但在本例中我们使用了手动设置的值。
1. 文件结构
布局专为移动设备设计，使用440×900像素的画板。围绕三个布局组构建：
- 标题（包含每克黄金价格）
- 控制选项（选择金条数量和重量）
- 金条插图
标题部分包括由两个文本运行组成的文本布局：一个包含静态文本（如标签），另一个是动态的，并使用数据绑定连接到外部数据。这使得黄金价格在数据变化时能够实时更新。
在控制部分，我们添加了加减按钮来设置金条数量。这些是内部带有图标的简单布局。下方有两个按钮用于在5克和10克选项之间切换。它们被设计为内部带有文本的圆角布局。
在状态机中，两个时间线定义了标签状态：一个用于10克按钮激活时（使用纯黑色背景和白色文本），另一个用于5克（样式相反）。两者之间的切换会视觉上更新活动标签。
总价部分也使用两个文本运行——一个用于货币图标，一个用于总价值。该值根据所选重量和数量变化，并由数据绑定驱动。
2. 金条插图
插图使用嵌套画板构建，其中包含单个矢量金条。在计算器布局内，我们复制了这个画板，根据用户选择显示1到6根金条。
由于有两个重量选项，我们使金条在视觉上调整大小——10克更宽，5克更窄。为此，我们使用了N-Slices，使边缘保持完整，仅中间部分拉伸。切片组位于固定大小的布局内，画板设置为Hug其内容，使其自动调整大小。
创建了两个时间线来控制金条大小：一个宽度为88px（10克），另一个为74px（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%隐藏）和修改包裹它的布局。当金条隐藏时，布局设置为固定宽度0px；当可见时，它使用Hug设置自动恢复其大小。
每条时间线都有其自己的这些设置组合，取决于哪些金条应该出现。例如，在显示4根金条的时间线中，我们需要防止第四根金条跳到行中心。为了保持适当间距，我们为用于移位的空布局分配了80px的固定宽度。在其他时间线上，通过将其宽度设置为0px来隐藏同一布局。
该系统使得在保持视觉结构的同时轻松切换数量。
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。在Numeric下的Converters中，创建了两个“Calculate”转换器——一个添加“+1”，一个减去“-1”。
在Listeners面板中，为加号按钮分配了一个操作：Quantity-gold = Quantity-gold，使用“+1”转换器。这样，单击加号按钮将计数增加1。对减号按钮执行相同操作，分配Quantity-gold = Quantity-gold并附加“-1”转换器。单击减号按钮将计数减少1。
在状态机内部，连接了六条时间线来表示从1到6的金条计数。每个转换使用Quantity-gold值触发正确的时间线。
默认情况下，加号按钮会无限增加值，但目标是将最大值限制为六根金条。在六根金条活跃的时间线上，通过将其点击区域比例设置为0并降低其不透明度来禁用加号按钮，以创建“禁用”视觉状态。在所有其他时间线上，这些属性返回到其活动值。
相同的逻辑应用于减号按钮以防止值低于一。在一根金条的时间线上，按钮被禁用，在所有其他时间线上，它返回到其活动状态。
4.4 总价逻辑
对于5克金条价格，我们使用以下公式计算： 总价 = 黄金价格每克 * 金条数量 * 5
在Converters → Numeric中，创建了一个Formula转换器，命名为Total Price 5g 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转换器。
然后，通过在Property字段中添加Total Price变量并在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，数据绑定将开启一个全新的可能性层供您探索。