Axure7.0教程(九)7.0重現進度條(動態面板新特性_定義面板大小)

3 評論 9749 瀏覽 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的元件,看到不同了嗎?

8-3

 

8-4

 

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

 

8

在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]]就可以了(見下圖)。

8-6

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

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

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

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

8-28-5

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

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

作者:小樓

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 在進度動態面板隱藏時的用例中,如果有等待20毫秒的動作,就會出現進度條閃爍的情況,所以需要去掉這一步。

    來自廣東 回復
  2. 顯示、隱藏 最后一步 切換 循環是在哪里操作的

    來自浙江 回復