Axure7.0教程（九）7.0重現進度條（動態面板新特性_定義面板大?。?/h2>

歐陽俊杰

2013-08-24

3 評論 9713 瀏覽 37 收藏 6 分鐘

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

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

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

相同的原件

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

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

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

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

5、? 兩個安置中都有一個按鈕，用來觸發動態面板的循環。

不同的原件

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

 

 

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

 

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

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

下面樓老師給大家說說實現思路：

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

2、? 我們設置在動態面板顯示時觸發事件來執行這些操作，當然這是習慣問題，你也可以把下面的事件放在動態面板隱藏時實現；

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

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

5、? 設置顯示動態顯示百分比的labal文本面板的部件文字等于變量baifenbi；

6、? 切換動態面板的可見性。

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

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

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

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

作者：小樓

收藏已收藏{{ postmeta.bookmark }} 點贊已贊{{ postmeta.postlike }}

更多精彩內容，請關注人人都是產品經理微信公眾號或下載App

AxureAxure教程原型設計