案例：Axure制作点赞类支持、百分比进度条

昨天我们分享了一则关于Axure制作带百分比进度条的案例，你可以参考以下链接查看。今天，我们将为你展示一个更高级的进度条案例。在这个案例中，点击“支持”按钮后，不仅会增加“被支持”方的投票数量，还会显示投票比例，非常实用！具体效果图如下：


1. 进度条的基本制作原理

首先，我们来介绍一下进度条的基本制作原理，你可以先参考以下链接了解基础概念和部分代码原理。

[Axure制作：带百分比的进度条案例](link)

2. 设置组件布局

在Axure中，按照以下图示设置组件布局。


3. 设置按钮交互动作

首先，我们来设置“支持”按钮的交互动作。

动作1：

- 设置“参数1”的数值，即点击“支持”按钮后，数值加1。

动作2：

- 触发“颜色进度条1”的“载入时”动作。

- 触发“颜色进度条2”的“载入时”动作。

4. 设置颜色进度条1的交互动作

接下来，我们来看一下“颜色进度条1”的“载入时”交互动作。

动作1：

- 设置“总量1”的内容，即“进度条1”的比率数值，这是一个临时的过渡数值。

- 设置“参数1”的元件文字为局部变量LVAR1。

- 设置“参数2”的元件文字为局部变量LVAR2。

所以，所需的比率数值的公式为：[LVAR1/(LVAR1 LVAR2)*100] （*100是为了方便百分比格式化）

动作2：

- 设置“颜色进度条2”的宽度。

- 设置“总量1”的元件为局部变量LVAR1。

所以，“颜色进度条2”的宽度为：[LVAR1.text*LVAR1.width/100] （/100是为了抵消百分比扩大的数额）

动作3：

- 设置“百分比1”的内容，这个数值需要格式化（保留2位小数）。

- 设置“总量1”的元件文字为局部变量LVAR1。

所以，“百分比1”的格式化后的内容为：[(2)%]

5. 设置按钮2及颜色进度条2的交互方式

与按钮1及颜色进度条1的交互方式相同，这里不再累述。你可以通过复制代码的方式来操作，但请注意修正参数的赋值。

按钮2的交互代码：

[code]

颜色进度条2的交互代码：

[code]

到这里，设置就结束了。设置还算简单，一切设置正确的话，效果如下：


如果觉得本文对你有帮助，请投票支持并点个赞哦！

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。