開始入門Axure時(shí)候，都會(huì)有一種想法，怎么才能最簡(jiǎn)單明了的體會(huì)到這個(gè)軟件的功能呢？從最基礎(chǔ)的開始按鈕，到后面的網(wǎng)站連接，漸漸地引導(dǎo)我入門。當(dāng)我學(xué)習(xí)到進(jìn)度條時(shí)候，網(wǎng)上也有許多版本。當(dāng)時(shí)學(xué)習(xí)了一段時(shí)間，也折騰了一段時(shí)間才學(xué)會(huì)，網(wǎng)上教程也很模糊，所以給新入門的朋友詳細(xì)的操作。

下圖是做出來的效果：

操作技巧：

1、首先拉出一個(gè)矩形，命名為進(jìn)度框；

2、然后復(fù)制這個(gè)矩形，將背景顏色換成另外一種顏色如粉紅，然后右鍵這個(gè)矩形轉(zhuǎn)化為動(dòng)態(tài)面板，并命名這個(gè)動(dòng)態(tài)面板為進(jìn)度條，如下圖所示：

3、將上述的進(jìn)度條拉入進(jìn)度框中，讓它們兩個(gè)重疊，同時(shí)從元件庫中的標(biāo)記元件中把水滴標(biāo)記拉出來，然后把水滴標(biāo)記命名為百分比，如下圖所示，我們完成了基本的布局，后面就是我們進(jìn)行動(dòng)畫效果的添加了

4、先對(duì)進(jìn)度條進(jìn)行設(shè)置，交互方式選擇載入時(shí)，在打開的界面中，添加動(dòng)作選擇設(shè)置尺寸，右邊的配置動(dòng)作勾選進(jìn)度條，然后設(shè)置下面的寬，點(diǎn)擊fx(設(shè)置進(jìn)度條的坐標(biāo))，打開編輯界面，首先添加局部變量LVAR1,選擇屬性為元件-進(jìn)度框，然后再上面的變量設(shè)置為[[LVAR1.width/100]]，意思是進(jìn)度條每一次移動(dòng)進(jìn)度框的1%，然后確認(rèn)就好了，如下圖所示

5、同樣還是設(shè)置進(jìn)度條的動(dòng)作，交互方式為尺寸改變時(shí)（在屬性-更多事件-尺寸改變時(shí)），首先設(shè)置進(jìn)度條的界限，防止進(jìn)度條出界；進(jìn)入用例編輯后，雙擊case1，如下圖操作：

在上述截圖中的6中，再添加變量，如下圖：

6、添加100ms的延時(shí)，因?yàn)樵诖蜷_網(wǎng)頁運(yùn)行會(huì)有一段時(shí)間，這里最好延時(shí)一下，然后再設(shè)置進(jìn)度條的動(dòng)作，如下圖所示，在上述的尺寸改變交互方式中，左邊的添加動(dòng)作-設(shè)置尺寸，然后右邊的配置動(dòng)作，勾選進(jìn)度條，下邊的寬中點(diǎn)擊fx(設(shè)置進(jìn)度條的坐標(biāo))，[[LVAR1.width+LVAR2.width/100]]即為進(jìn)度條的坐標(biāo)加上每次移動(dòng)進(jìn)度框1%的坐標(biāo)，實(shí)現(xiàn)動(dòng)畫的效果。

7、這步是最關(guān)鍵的一步，實(shí)現(xiàn)水滴跟隨進(jìn)度條一起走，關(guān)鍵的是定位水滴標(biāo)記的坐標(biāo)，首先我們看一下水滴標(biāo)記的圖形，如下圖，定位水滴標(biāo)記的位置不是下邊最尖的部分，而是左右的邊界：

所以以進(jìn)度框最左邊的邊界為起點(diǎn)（0,0），那么水滴最下端在原點(diǎn)的時(shí)候，實(shí)際坐標(biāo)就是負(fù)的，了解這點(diǎn)后，后面的操作就簡(jiǎn)單了；在前面的基礎(chǔ)上，添加動(dòng)作-移動(dòng)，然后再配置動(dòng)作中勾選百分比，移動(dòng)選擇絕對(duì)距離，點(diǎn)擊X的fx,如下圖所示，添加兩個(gè)局部變量，LVAR1-進(jìn)度條，LVAR2-百分比，函數(shù)輸入：

[[LVAR1.x+LVAR1.width-LVAR2.width/2]]

函數(shù)的意思是進(jìn)度條的x坐標(biāo)加上進(jìn)度條的起始位置，但是還需要減去水滴的寬度的一半，才是實(shí)際的水滴標(biāo)志x的坐標(biāo)

然后設(shè)置水滴標(biāo)志y的坐標(biāo)，添加變量LVAR1，函數(shù)為L(zhǎng)VAR1.y，如下圖：

8、設(shè)置完水滴標(biāo)記隨進(jìn)度條一起走后，我們還需要設(shè)置文字顯示在水滴標(biāo)記中，添加變量LVAR1-進(jìn)度條，LVAR2-進(jìn)度框，插入函數(shù)[[Math.floor(LVAR1.width/LVAR2.width*100)]]%，其中Math.floor就是對(duì)括號(hào)內(nèi)的數(shù)進(jìn)行取整，然后里面的計(jì)數(shù)公式就是計(jì)算百分比了。

9、到此為止就完成了水滴式進(jìn)度條的所有操作，然后按F5預(yù)覽效果。

下面是源文件的百度云鏈接：

http://pan.baidu.com/s/1bpEWnoV

密碼：w1sv

本文由 @iDarhy 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議