中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

下圖是做出來的效果：

操作技巧：

1、首先拉出一個矩形，命名為進度框；

2、然后復制這個矩形，將背景顏色換成另外一種顏色如粉紅，然后右鍵這個矩形轉化為動態面板，并命名這個動態面板為進度條，如下圖所示：

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

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

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

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

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

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

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

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

函數的意思是進度條的x坐標加上進度條的起始位置，但是還需要減去水滴的寬度的一半，才是實際的水滴標志x的坐標

然后設置水滴標志y的坐標，添加變量LVAR1，函數為LVAR1.y，如下圖：

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

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

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

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

密碼：w1sv

本文由 @iDarhy 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自 Pexels，基于 CC0 協議