国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

Axure7.0教程（九）7.0重現(xiàn)進(jìn)度條（動(dòng)態(tài)面板新特性_定義面板大?。?/h2>

歐陽(yáng)俊杰

2013-08-24

3 評(píng)論 9885 瀏覽 37 收藏 6 分鐘

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

本教程案例下載：進(jìn)度條6.5&7.0.rar

首先說(shuō)一下要準(zhǔn)備的原件：

相同的原件

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

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

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

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

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

不同的原件

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

 

 

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

 

在Axure6.5中，我們需要用動(dòng)態(tài)面板向右滑動(dòng)來(lái)實(shí)現(xiàn)進(jìn)度條變長(zhǎng)的效果，所以需要一個(gè)里面有紅色矩形的動(dòng)態(tài)面板，同時(shí)需要一個(gè)無(wú)邊框與頁(yè)面背景顏色一致的矩形遮蓋它；

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

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

1、? 當(dāng)點(diǎn)擊按鈕時(shí)，我們激活循環(huán)，來(lái)實(shí)現(xiàn)百分比的遞增、進(jìn)度條變長(zhǎng)；

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

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

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

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

6、? 切換動(dòng)態(tài)面板的可見(jiàn)性。

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

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

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

最后，就是見(jiàn)證奇跡的時(shí)刻，你做到了嗎？

作者：小樓

收藏已收藏{{ postmeta.bookmark }} 點(diǎn)贊已贊{{ postmeta.postlike }}

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App

AxureAxure教程原型設(shè)計(jì)