axure基础教程(十一):进度条与数字文本框如何联动?

发布网友发布时间：2024-09-28 14:16

共1个回答

热心网友时间：2024-09-29 13:40

今天要分享的是Axure中进度条与数字文本框联动的实用教程，让我们快速了解如何实现这个交互效果。

首先，我们需要创建一个动态联动场景。在设计原型时，我尝试了一个有趣的交互，现在就来逐步演示：

在画板中添加一个数字文本框，选择输入类型为数字，调整样式。
接着，添加一个矩形作为灰色槽底，调整大小和弧度，放置在合适位置。复制一个灰色槽底并修改为蓝色进度条，与槽底对齐。
画一个圆形，将其转换为动态面板，以便添加拖动动作。圆形的宽高与蓝色进度条一致，使其重叠。
设置动态面板交互，添加拖动事件，移动圆沿X轴，定义移动范围，并与蓝色进度条尺寸关联。
预览时发现不完全重合，需调整公式，例如减去圆的直径20，确保与槽底同步。
最后，设置文本联动，选中数字文本框，利用局部变量LVAR1和LVAR2，编写公式，实现进度条变化时数字的自动更新。

通过以上步骤，你就能看到当进度条改变时，数字文本框会实时反映出对应的比例。如果你对公式中的数学细节有疑问，记得第五步中解释了为什么需要减去20。如果想了解另一种设置方法，敬请期待我的后续教程。