发布时间：2024-1-29 分类： 行业资讯
当我开始使用Axure时，我有了一个主意。如何充分利用此软件？从最基本的开始按钮到后续的网站连接，我逐渐开始。当我学习进度条时，互联网上有很多版本。我学了一会儿，我也学了一会儿。在线教程也很模糊，所以我会给新朋友详细说明。
结果如下：
操作技能：
1.首先拉出一个矩形并将其命名为进度框;
2，然后复制矩形，将背景颜色更改为另一种颜色，如粉红色，然后右键单击此矩形到动态面板，并将动态面板命名为进度条，如下所示：
3.将上面的进度条拉到进度框中，让它们重叠，然后从组件库中的标记中拉出水印，然后将水印命名为百分比。如下图所示，我们已经完成了基本布局，后者是我们动画效果的添加
4，首先设置进度条，交互模式选择加载，在打开界面，添加动作选择大小，右键配置动作检查进度条，然后设置下面的宽度，单击fx（设置进度条坐标），打开编辑界面，首先添加局部变量LVAR1，选择属性作为组件 - 进度框，然后将上面的变量设置为[[LVAR1.width/100]]，意味着进度条移动进度框的1％每一次。然后确认一下，如下所示。
5，同样是设置进度条的动作，交互模式是当大小改变时（在属性中 - 更多事件 - 大小改变），首先设置进度条的限制以防止进度条被移出界限;进入用例编辑后，双击case1，如下图操作：
在上面的6个屏幕截图中，添加变量，如下所示：
6，加上100ms延迟，因为会有一段时间打开网页，这里最好是延迟，然后设置进度条的动作，如下图所示，在上面的大小改变交互模式下，加上左侧动作 - 设置大小，然后在右侧配置动作，检查进度条，单击较低宽度的fx（设置进度条的坐标），[[LVAR2.width + LVAR1.width/100]]是进度条的坐标加上每次将进度框移动到坐标的1％以达到动画的效果。
7.这一步是最关键的一步。水滴跟随进度条。关键是找到水印的坐标。首先，让我们看一下水印标记。如下所示，水印的位置不是下面最清晰的部分。 ，但左右边界：
因此，从进度框（0,0）的最左边界开始，当水滴底部位于原点时，实际坐标为负。理解了这一点后，后续操作很简单;在前一个的基础上，添加Action - move，然后配置动作来检查百分比，移动选择绝对距离，单击X的fx，如下图所示，添加两个局部变量，LVAR1-progress，LVAR2-百分比，功能输入：
[[LVAR1.x + LVAR1.width-LVAR2.width/2]]
该功能表示进度条的x坐标加上进度条的起始位置，但也需要减去水滴宽度的一半，即实际水滴标记的坐标x
然后设置水滴标志y的坐标，添加变量LVAR1，函数为LVAR1.y，如下图所示：
8.设置水印标记和进度条后，我们还需要设置要在水印中显示的文本，添加变量LVAR1 - 进度条，LVAR2-进度框，插入函数[[Math.floor（LVAR1.width）/LVAR2.Width * 100）]]％，其中Math.floor是圆括号中的数字，然后里面的计数公式是计算百分比。
9.此时，完成了drop-type进度条的所有操作，然后按F5预览效果。
以下是源文件的百度云链接：
http://pan.baidu.com/s/1bpEWnoV
密码：w1sv
