當(dāng)我開始使用Axure時，我有了一個主意。如何充分利用此軟件？從最基本的開始按鈕到后續(xù)的網(wǎng)站連接，我逐漸開始。當(dāng)我學(xué)習(xí)進(jìn)度條時，互聯(lián)網(wǎng)上有很多版本。我學(xué)了一會兒，我也學(xué)了一會兒。在線教程也很模糊，所以我會給新朋友詳細(xì)說明。

結(jié)果如下：

操作技能：

1.首先拉出一個矩形并將其命名為進(jìn)度框;

2，然后復(fù)制矩形，將背景顏色更改為另一種顏色，如粉紅色，然后右鍵單擊此矩形到動態(tài)面板，并將動態(tài)面板命名為進(jìn)度條，如下所示：

3.將上面的進(jìn)度條拉到進(jìn)度框中，讓它們重疊，然后從組件庫中的標(biāo)記中拉出水印，然后將水印命名為百分比。如下圖所示，我們已經(jīng)完成了基本布局，后者是我們動畫效果的添加

4，首先設(shè)置進(jìn)度條，交互模式選擇加載，在打開界面，添加動作選擇大小，右鍵配置動作檢查進(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)度條的動作，交互模式是當(dāng)大小改變時（在屬性中 - 更多事件 - 大小改變），首先設(shè)置進(jìn)度條的限制以防止進(jìn)度條被移出界限;進(jìn)入用例編輯后，雙擊case1，如下圖操作：

在上面的6個屏幕截圖中，添加變量，如下所示：

6，加上100ms延遲，因?yàn)闀幸欢螘r間打開網(wǎng)頁，這里最好是延遲，然后設(shè)置進(jìn)度條的動作，如下圖所示，在上面的大小改變交互模式下，加上左側(cè)動作 - 設(shè)置大小，然后在右側(cè)配置動作，檢查進(jìn)度條，單擊較低寬度的fx（設(shè)置進(jìn)度條的坐標(biāo)），[[LVAR2.width + LVAR1.width/100]]是進(jìn)度條的坐標(biāo)加上每次將進(jìn)度框移動到坐標(biāo)的1％以達(dá)到動畫的效果。

7.這一步是最關(guān)鍵的一步。水滴跟隨進(jìn)度條。關(guān)鍵是找到水印的坐標(biāo)。首先，讓我們看一下水印標(biāo)記。如下所示，水印的位置不是下面最清晰的部分。 ，但左右邊界：

因此，從進(jìn)度框（0,0）的最左邊界開始，當(dāng)水滴底部位于原點(diǎn)時，實(shí)際坐標(biāo)為負(fù)。理解了這一點(diǎn)后，后續(xù)操作很簡單;在前一個的基礎(chǔ)上，添加Action - move，然后配置動作來檢查百分比，移動選擇絕對距離，單擊X的fx，如下圖所示，添加兩個局部變量，LVAR1-progress，LVAR2-百分比，功能輸入：

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

該功能表示進(jìn)度條的x坐標(biāo)加上進(jìn)度條的起始位置，但也需要減去水滴寬度的一半，即實(shí)際水滴標(biāo)記的坐標(biāo)x

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

8.設(shè)置水印標(biāo)記和進(jìn)度條后，我們還需要設(shè)置要在水印中顯示的文本，添加變量LVAR1 - 進(jìn)度條，LVAR2-進(jìn)度框，插入函數(shù)[[Math.floor（LVAR1.width）/LVAR2.Width * 100）]]％，其中Math.floor是圓括號中的數(shù)字，然后里面的計數(shù)公式是計算百分比。

9.此時，完成了drop-type進(jìn)度條的所有操作，然后按F5預(yù)覽效果。

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

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

密碼：w1sv

« 不要閑置資金。如果你想保存，你可以保存自己，Mickey Finance，Aurora Finance，ppmoney | 千元機(jī)游戲性能對決世界大賽：魅族X8掌機(jī)Vulkan角落超車OPPO K1 »