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

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

下圖是做出來的效果：

操作技巧：

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

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

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

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

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

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

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

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

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

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

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

然后設(shè)置水滴標(biāo)志y的坐標(biāo)，添加變量LVAR1，函數(shù)為LVAR1.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就是對括號內(nèi)的數(shù)進(jìn)行取整，然后里面的計數(shù)公式就是計算百分比了。

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é)議