Axure9制作会动的进度条

演示一下如何制作一个会动的进度条，进度条上的百分比也能随之同步变化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

先看一下最终效果吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

首先我们需要三个元件，分别为“底框”“进度条”和“展示文字”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

我们将“底框”的长宽设置为“300”“3”，颜色设置为灰色，线段为“0”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

我们将“进度条”的长宽设置为“1”“3”，颜色设置为蓝色，线段为“0”；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

现在我们在“进度条”上增加交互：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

尺寸改变时→启用情形→选择[[This.width]]<[[b.width]]（注意，这里需要先添加局部变量，将“底框”元件设置为b），具体操作如下图；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

添加动作→等待：设置为50ms（当前进度条增长速度，可以按照需求设置）；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

添加动作→设置尺寸→选择【当前元件】→宽设置为[[This.width+1]]（宽度每次增加1），高为当前高度为3，锚点设置为左侧，具体操作如下图；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

添加动作→设置文本→选择【展示文字】元件，设置值为[[(This.width/b.width*100).toFixed(0)]]%（这样文字显示进度就会和进度条保持一致啦），因为这里也使用了局部变量b，所以不要忘记增加局部变量哦~具体操作如下图；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

新建交互→载入时→设置尺寸：宽设置为[[This.width+1]]（宽度每次增加1），高为当前高度为3，具体操作如下图；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html

到这就完成我们的所有操作啦~预览就可以看到想要的效果啦！大家快试一试吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/56144.html