Axure RP 10制作进度条

1 准备并编辑所需元件

拖动动态面板(Dynamic Panel)和三个矩形元件(Box 1)，动态面板命名为“进度条”，三个矩形元件分别命名为“边框”、“底部”、“遮挡”，设置格式如下：
边框–填充透明，边框黑色，长300，宽24
底部–填充红色，边框透明，长300，宽22
遮挡–填充白色，边框透明，长300，宽22

三个矩形元件重叠放置，注意“遮挡”需放置在“底部”上方

拖动按钮元件(Button)，命名为“开始”，按钮中的文字也改为“开始”
拖动动态面板(Dynamic Panel)，命名为“定时”，插入状态页面State 2

双击“进度条”动态面板，插入两个标签(Label)，分别命名为“进度数字”和“进度百分号”，将标签内文字分别改为“0”和“%”

将“边框”矩形元件置于最顶层，以防后续“遮挡”元件移动时遮挡住边框

2 设置全局变量

点击“项目(Project)”，选择“全局变量(Global Variable)”

添加全局变量"total"，设置初始值为0

3 设置按钮元件的交互

点击“开始”按钮，在交互中选择“鼠标单击时(Mouse Button Down)”-“设置面板状态(Set Panel State)”，选择“定时”动态面板，选择状态为“Next”，勾选“向后循环(Wrap from last to first)”，循环间隔为300ms

4 设置动态面板的交互

点击“定时”动态面板，在交互中选择“状态改变时(Panel State Changed)”-“移动(Move)”，选择“遮挡”矩形元件，移动类型为“相对(By)”，x=矩形元件的长度÷100=3，动画为“线性(linear)”，时间为300ms

继续在交互中选择“状态改变时(Panel State Changed)”-“设置变量值(Set Variable Value)”，选择变量“total”，在值(VALUE)中点击fx

选择变量“total”，设置表达式为[[total+1]]，实现进度条的数字变化

进度条最大值为100，故需要为变量“total”设置上限值
继续在“状态改变时(Panel State Changed)”中，点击“添加条件(Add Case)”，如下图所示设置条件：
变量值 “total” ＜ 值 100
设为“＜”而非“≤”是因为表达式为[[total+1]]，故“total”最大为99，而非100

继续在“状态改变时(Panel State Changed)”中，选择“设置文本(Set Text)”，目标元件选择“进度数字”，变量选择“total”

按F5可预览效果