為了更直觀的體現(xiàn)Axure rp7.0的改變，這章我們用Axure7.0的新特性重新制作一次進度條，我們以axure6.5制作進度條的案例和axure7.0作比較，來看看新特性帶來的好處。

本教程案例下載：進度條6.5&7.0.rar

首先說一下要準備的原件：

相同的原件

1、? 我們做的進度條是動態(tài)的，所以需要變量支持，兩個案例中我們都定義了變量baifenbi；

2、? 同樣，因為動態(tài)，我們需要用到循環(huán)，最簡單的實現(xiàn)就是通過動態(tài)面板的可見性切換（通過兩個狀態(tài)切換也能實現(xiàn)循環(huán)），所以兩個案例中都有一個沒有任何其他內(nèi)容的動態(tài)面板，標簽是“循環(huán)”；

3、? 兩個案例都有進度條的外邊框，需要一個矩形邊框加粗，并且設(shè)置填充色為透明；

4、? 然后需要每個案中都有兩個labal文字面板，一個寫上%，另外一個動態(tài)顯示變量值baifenbi；

5、? 兩個安置中都有一個按鈕，用來觸發(fā)動態(tài)面板的循環(huán)。

不同的原件

上面是6.5的元件，下面是7.0的元件，看到不同了嗎？

如果上面不清楚，就看下面這張圖。

在Axure6.5中，我們需要用動態(tài)面板向右滑動來實現(xiàn)進度條變長的效果，所以需要一個里面有紅色矩形的動態(tài)面板，同時需要一個無邊框與頁面背景顏色一致的矩形遮蓋它；

在axure7.0中，就不用這么麻煩。我們只需要在一個動態(tài)面板里面放上長度適合的紅色矩形，再把面板寬度設(shè)置為1，并把它放在進度條邊框的左邊框下面就可以了。是不是發(fā)現(xiàn)6.5的搭配很亂很丑，使用時還可能和頁面其他元件不協(xié)調(diào)？

下面樓老師給大家說說實現(xiàn)思路：

1、? 當點擊按鈕時，我們激活循環(huán)，來實現(xiàn)百分比的遞增、進度條變長；

2、? 我們設(shè)置在動態(tài)面板顯示時觸發(fā)事件來執(zhí)行這些操作，當然這是習(xí)慣問題，你也可以把下面的事件放在動態(tài)面板隱藏時實現(xiàn)；

3、? 只要百分比沒有到100%，也就是說變量baifenbi的值小于100，當面板循環(huán)一次時（即顯示、隱藏一次），我們需要百分比遞增1。那么就通過設(shè)置條件if變量baifenbi小于值100，設(shè)置變量值讓baifenbi等于值[[baifenbi+1]]；

4、? 讓進度條變長，這一步6.5和7.0是有區(qū)別的：axure6.5中，我們需要在這一步向右移動動態(tài)面板，因為進度條長度是300px，所以每一次我們讓動態(tài)面板延x軸移動相對距離3，y軸保持不變；axure7.0呢，也很簡單，只要設(shè)置動態(tài)面板尺寸的寬為[[baifenbi*3]]就可以了（見下圖）。

5、? 設(shè)置顯示動態(tài)顯示百分比的labal文本面板的部件文字等于變量baifenbi；

6、? 切換動態(tài)面板的可見性。

7、? 動態(tài)面板的顯示事件設(shè)置完后，我們設(shè)置動態(tài)面板的隱藏事件；隱藏事件就比較簡單了，只需要設(shè)置一個等待20毫秒，然后切換動態(tài)面板可見性能夠讓循環(huán)繼續(xù)就可以了。

下圖兩張圖對比一下動態(tài)面板的事件是不是，只有一句不一樣？

好了，兩種實現(xiàn)方式，講解完了，大家可以分別嘗試制作一下，6.5的案例也可以直接在axure7.0里面做。

最后，就是見證奇跡的時刻，你做到了嗎？

作者：小樓