零基礎學產品，BAT產品總監帶，2天線下集訓+1年在線課程，全面掌握優秀產品經理必備技能。瞭解詳情
為瞭更直觀的體現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、? 設置顯示動態顯示百分比的la分料機bal文本面板的部件文字等於變量baifenbi；
6、? 切換動態面板的可見性。
7、? 動態面板的顯示事件設置完後，我們設置動態面板的隱藏事件；隱藏事件就比較簡單瞭，隻需要設置一個等待20毫秒，然後切換動態面板可見性能夠讓循環繼續就可以瞭。
下圖兩張圖對比一下動態面板的事件是不是，隻有一句不一樣？
好瞭，兩種實現方式，講解完瞭，大傢可以分別嘗試制作一下，6.5食品加工設備的案例也可以直接在axure7.0裡面做。
最後，就是見證奇跡的時刻，你做到瞭嗎？
作者：小樓
在進度動態面板隱藏時的用例中，如果有等待20毫秒的動作，就會出現進度條閃爍的情況，所以需要去掉這一步。
人人都是產品經理（woshipm.com）是中國最大、最活躍的以產品經理、互聯網運營為核心的學習、交流、分享社群，集媒體、教育、招聘、社群活動為一體，全方位服務產品經理和運營人，微信公眾號woshipm。成立7年以來舉辦在線講座500餘期，線下活動300+場，覆蓋北京、上海、廣州、深圳、杭州、成都等10餘城市，在互聯網業內得到瞭廣泛關註和高度好評。社區目前擁有300萬忠實粉絲，其中產品經理占比70萬， 中國75%的產品經理都在這裡。
AUGI SPORTS｜重機車靴｜重機車靴推薦｜重機專用車靴｜重機防摔鞋｜重機防摔鞋推薦｜重機防摔鞋
AUGI SPORTS｜augisports｜racing boots｜urban boots｜motorcycle boots
文章標籤
全站熱搜
留言列表
