怎樣用Axure制作一個(gè)會(huì)動(dòng)的進(jìn)度條，并且進(jìn)度條上的百分比還能同步變化？這篇文章里，作者便做了分享，一起來看看吧。

今天給大家演示一下如何制作一個(gè)會(huì)動(dòng)的進(jìn)度條，進(jìn)度條上的百分比也能隨之同步變化。

先看一下最終效果吧~

首先我們需要三個(gè)元件，分別為“底框”“進(jìn)度條”和“展示文字”；

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

我們將“進(jìn)度條”的長寬設(shè)置為“1”“3”，顏色設(shè)置為藍(lán)色，線段為“0”；

現(xiàn)在我們?cè)凇斑M(jìn)度條”上增加交互：

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

添加動(dòng)作→等待：設(shè)置為50ms（當(dāng)前進(jìn)度條增長速度，可以按照需求設(shè)置）；

添加動(dòng)作→設(shè)置尺寸→選擇【當(dāng)前元件】→寬設(shè)置為[[This.width+1]]（寬度每次增加1），高為當(dāng)前高度為3，錨點(diǎn)設(shè)置為左側(cè)，具體操作如下圖；

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

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

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