Axure进度条动态交互效果

Axure进度条动态交互效果，展示效果如图

图1

实现思路：在进度条（矩形框）中添加交互，载入时自动调整进度条的大小，然后用尺寸改变时（进度条的大小）触发其他交互，并添加判断条件，如果进度条的长度小于进度槽，进度条的长度自动增加直到进度条的长度等于进度槽的长度；上面的百分比套用函数公示，用当前进度条的长度/进度条的长度即可实现

在axure8中实现如下：

为更直观显示，所以将进度条加大加粗

1.拖出一个矩形，填充颜色浅灰色，并命名进度槽；该矩形即为固定的进度槽。

2.拖出另一个矩形，长度设置为1，宽度与上述矩形（进度槽）相同，颜色填充为红色，并命名为进度条；该矩形即为图1中长度改变的进度条。

3.拖出一个文本标签，文字内容修改为0%，并命名百分比。

图2

4.将进度条放在进度槽上，头部对齐（此时两个矩形即进度条和进度槽的横纵坐标是相同的），并将百分比放在进度槽中间的上方。

5.拖出一个文本标签，文字内容修改为0%。

图3

6.右下角点击选择进度条，然后上面的交互中选择更多事件-载入时-元件-设置尺寸-当前元件打对号-删除宽原来的数据-点击宽后面的fx插入函数-插入变量或函数-选择width并将width+1（如图10所示）-然后点击确定

图4

图5

图6

图7

图8

图9

图10

7.还是选择进度条，然后上面的交互中选择更多事件-选择尺寸改变时-添加条件（具体条件如图，即当进度条<进度槽时触发），其中在添加最后一个函数时，添加局部变量，将进度槽变成局部变量a

图11

图12

图13

8.添加动作-其他-等待时间设为50毫秒（此处时间长短为进度条增加一个单位长度的时间，时间越短，进度条增长速度越快）

图14

9.设置尺寸-当前原件-具体参数如图15

图15

10.设置文本-元件选择百分比-具体参数如图17，[[(This.width/a.width*100).toFixed(0)]]%，其中This.width/a.width*100算出当前进度条所占比例，toFixed(0)函数表示保留0位小数即保留整数

图16

图17

11.点击确定，所有交互效果就添加完毕，效果如图18（因截屏录制原因导致gif未从0%开始）。

图18