網(wǎng)上諸多有關(guān)Axure進(jìn)度條制作的樣制方法，但是作a作步驟實(shí)在是太跳躍，很不容易搞明白。進(jìn)度進(jìn)度因此??，條制條筆者在這里總??結一下Axure進(jìn)度條制作的大方方法。
下面示例在A(yíng)xure7中操作，樣制但是作a作在A(yíng)xure8里步驟也是一樣的，建議更新至Axur(′_｀)e8，進(jìn)度進(jìn)度因為其具(ju)有不少便利的條制條新功能。
一、大方最簡(jiǎn)陋的樣制進(jìn)度條：用于說(shuō)明原理1、新建一個(gè)矩形，作a作命名為“進(jìn)度框”；
2、進(jìn)度進(jìn)度新建一個(gè)矩形，條制條讓它和之前的大方矩形大小一樣，并重疊，填充黃色，命名為“進(jìn)度條??”；
3、對“進(jìn)度條”右鍵，選擇“轉換成動(dòng)態(tài)面板”，命名為“動(dòng)態(tài)條”，設置寬度為1（因不能設置成0）；
4、因進(jìn)度條一般在頁(yè)面載入時(shí)顯示，所以選擇“動(dòng)態(tài)條”的載入時(shí)–設置面板尺寸–勾選“動(dòng)態(tài)條”，按下圖順序設置寬度，點(diǎn)??擊fx–在彈出的界面添加局部變量(liang)–設置函數–確認，最后不要忘記勾選動(dòng)畫(huà)為線(xiàn)性，用時(shí)可以隨意設置，這里設為5000毫秒；
LVAR1表示“進(jìn)度框”這個(gè)??部件，[[LVAR1.width]]則表示“進(jìn)度框”的寬度。
5、最后點(diǎn)擊發(fā)布-預覽，便可以欣賞你剛剛完成的進(jìn)度條了。
二、為進(jìn)度條添加數字，更好地顯示進(jìn)度1、進(jìn)度條做好后，在進(jìn)度條居中位置ヾ(＾-＾)ノ添加一個(gè)Label，設置文字居中顯示，并(bing)隱藏，命名為“進(jìn)??度數字”；
2、??對“進(jìn)度數字”右鍵，選擇“轉換成動(dòng)┐(′д｀)┌態(tài)面板”，命名為“動(dòng)態(tài)數字”；
3(╬?益?)、對“進(jìn)度數字”做以下操作，載入時(shí)–顯示–動(dòng)態(tài)數字(╯°□°)╯+進(jìn)度數字；??
4、對(dui)“進(jìn)度數字”做下圖操作，更多事件–顯示–設置文本–進(jìn)度數字–設置局部變量–設置函數–確認；
函數為：
[[Math.floor(LVAR2.widt(′▽?zhuān)?)h/LVAR(╯‵□′)╯1.width*100)]]%
原理為：
進(jìn)度??數字%=動(dòng)態(tài)條的寬度/進(jìn)度框的寬度*100%
做完前面4步，會(huì )發(fā)現顯示數字是(shi)不會(huì )隨進(jìn)度條變化的，因??此還需要設??置數字顯示的自循環(huán)。
5、還是在剛才的用例1里依次添加，等待0秒-隱藏This-顯示This；
6、最后，點(diǎn)發(fā)布–預覽，就可以看到(′?_?`)帶數字的進(jìn)??度條了。
三、各類(lèi)進(jìn)度條只要掌握了以上進(jìn)度條以及數字添加的原理后，就(jiu)可以舉一反三，設計出形式各樣的進(jìn)度條。
為達到旋轉等效果，我將A(′?_?`)xure7更新至了Axure8。
1、直線(xiàn)型進(jìn)度條通過(guò)Axure8的“”移動(dòng)“樣式(′_｀)，可以設置文字+水滴隨著(zhù)進(jìn)度條而移動(dòng)。
2、圓形進(jìn)(╬?益?)度條用Axure8實(shí)現圓形進(jìn)度條的方法有很多，下面說(shuō)我自己的思路。(//ω//)
（1）通過(guò)Axure8的形狀變換，制作一下5個(gè)組件，將其重疊成同一個(gè)圓環(huán)，“左動(dòng)”、“右動(dòng)”代表進(jìn)度條，“z”、“y”代表用于遮擋的部分，“b”代表背景圓環(huán)，上下順序如下圖：
部件上下順序
（2）頁(yè)面交互–(′▽?zhuān)?頁(yè)面載入時(shí)–對“左動(dòng)”進(jìn)行設置–等待2000秒–隱藏“z”–對“右動(dòng)”進(jìn)行設置；
對 “左動(dòng)” 的設置
對 “右動(dòng)” 的設置
（3）前2步做完，進(jìn)度條(tiao)的??部分就完成了，下面制作數字的顯示，添加Label，??命名為“數字”，設置好文字的樣式(shi)，轉換成動(dòng)態(tài)面板，隱藏；
（4）設置文字的自循環(huán)，首先在動(dòng)態(tài)面板的載入時(shí)–顯示動(dòng)態(tài)面板+數??字；
（5）實(shí)際上進(jìn)度條的載入分為了(le)兩段，其中間有一個(gè)事件就是“z”隱藏，于是便利用“z”作為條件來(lái)區分計算“數字”，在動(dòng)態(tài)面板的顯示時(shí)–case1–設置??條件為 if 元件可見(jiàn) z ==true –設置文本（這里使用的函數是 [[Math.floor(LVAR1.rotation/360*100)]]% ；LVAR1代表元件“左動(dòng)”）–等待0秒–隱藏this–顯示this；
（6）case2–設置條件為 if 元件可見(jiàn) z ==false –設置文本（這里使用的函數是 [[Math.floor((LVAR1.rotation+180)/360*100)]]% ；LVAR1代表元件“右動(dòng)”）–等待0秒–隱藏this–顯示this；
3、文字型進(jìn)度條（7）發(fā)布–預覽，就大功告成了。
四、小結進(jìn)度條的制作在A(yíng)xure里應該算是比較簡(jiǎn)單的，只要理解了基本的原理，就能變換出各種不同樣式的進(jìn)度條。(′?｀*)
Copyright ? 2012-2018 天津九安特機電工程有限公司 版權所有 備案號：
