怎樣用Axure制作一個會動的進度條，并且進度條上的百分比還能同步變化？這篇文章里，作者便做了分享，一起來看看吧。

今天給大家演示一下如何制作一個會動的進度條，進度條上的百分比也能隨之同步變化。

先看一下最終效果吧~

首先我們需要三個元件，分別為“底框”“進度條”和“展示文字”；

我們將“底框”的長寬設置為“300”“3”，顏色設置為灰色，線段為“0”；

我們將“進度條”的長寬設置為“1”“3”，顏色設置為藍色，線段為“0”；

現在我們在“進度條”上增加交互：

尺寸改變時→啟用情形→選擇[[This.width]]<[[b.width]]（注意，這里需要先添加局部變量，將“底框”元件設置為b），具體操作如下圖；

添加動作→等待：設置為50ms（當前進度條增長速度，可以按照需求設置）；

添加動作→設置尺寸→選擇【當前元件】→寬設置為[[This.width+1]]（寬度每次增加1），高為當前高度為3，錨點設置為左側，具體操作如下圖；

添加動作→設置文本→選擇【展示文字】元件，設置值為[[(This.width/b.width*100).toFixed(0)]]%（這樣文字顯示進度就會和進度條保持一致啦），因為這里也使用了局部變量b，所以不要忘記增加局部變量哦~具體操作如下圖；

新建交互→載入時→設置尺寸：寬設置為[[This.width+1]]（寬度每次增加1），高為當前高度為3，具體操作如下圖；

到這就完成我們的所有操作啦~預覽就可以看到想要的效果啦！大家快試一試吧~