本文通(tōng)過制(zhì)作(zuò)一個(gè)簡單的進度條，順便來(lái)了解一下“觸發事件”動作(zuò)。

先看效果：

涉及知識點：

“設置尺寸”動作(zuò)；

元件變量：Target；

元件屬性：height（元件高(gāo)度）、width（元件寬度）；

數(shù)學函數(shù)：math.floor() – 返回小(xiǎo)于或等于一個(gè)給定數(shù)字的最大(dà)整數(shù) —— 算(suàn)法；

了解“觸發事件”動作(zuò) —— 循環關鍵點；

了解“等待”動作(zuò) —— 與觖發動作(zuò)結合使用才能有(yǒu)效循環；

了解動作(zuò)執行(xíng)的前提條件。

實現目标：

完成需求：點擊開(kāi)始，進度條自動填充滿，并在此過程中不斷更新當前進度 – 百分比；

練習目的：通(tōng)過使用“觸發事件”，完成自循環及停止循環。有(yǒu)别于常用的動态面闆循環機制(zhì)。

難點：如果隻是自動充滿，那(nà)麽用一下設置尺寸，加一個(gè)動畫(huà)就可(kě)以搞定。但(dàn)是這個(gè)百分比一直在變，就需要動一點點小(xiǎo)心思了。

以下是具體(tǐ)步驟

1. 準備素材

三個(gè)矩形：

（1）背景框 – 命名為(wèi)背景框

填充顔色：不透明(míng)度0（即全透明(míng)）—— 目的：底下的進度條變化時(shí)能看到 —— 重要；

元件寬高(gāo)：400 * 40 —— 重要，但(dàn)可(kě)自動設置；

元件層級：置于頂層（至少(shǎo)要保持在進度條的上(shàng)面） —— 重要；

默認文字：0% —— 不重要，可(kě)無任何文字。後期動作(zuò)執行(xíng)之後會(huì)自動顯示；

文字大(dà)小(xiǎo)、文字顔色、文字排版、線段等都不重要，可(kě)自動設置。

問題思考：為(wèi)什麽填充顔色是全透明(míng)的，文字及邊框還(hái)可(kě)見呢？

怎麽設置能讓它們一起透明(míng)呢？

（2）進度條

填充顔色：與背景色不同即可(kě) —— 此用例使用的是CCCCCC，可(kě)自行(xíng)設置其他顔色 —— 重要；

元件寬高(gāo)：1 * 40 —— 默認是進度是0，所以寬為(wèi)0，但(dàn)是axure元件寬高(gāo)的最小(xiǎo)值隻能到1，故此處是1。高(gāo)不可(kě)大(dà)于背景框的高(gāo) —— 重要；

元件層級：置于底層（至少(shǎo)要保持在背景框的下面） —— 重要；

元件位置：等于背景框位置（左上(shàng)角）；

不要放文字。

（3）開(kāi)始按鈕

無特殊說明(míng)，可(kě)自行(xíng)設置。用于交互動作(zuò)（此處是點擊）。

也可(kě)以省去此元件，直接将交互動作(zuò)放置于“背景框”，或者頁面載入時(shí)……

由到進度條為(wèi)寬度1，與背景框的邊線重合了，故好像沒有(yǒu)進度條。

2. 動作(zuò)設置

梳理(lǐ)一下進度條執行(xíng)的邏輯，嘗試畫(huà)個(gè)流程圖。

翻譯成大(dà)白話(huà)就是：

如果進度條滿了，

就不執行(xíng)（什麽都不做(zuò)），如果沒滿就：

改變進度條的寬度；

更新百分比；

等待 1 毫秒(miǎo)。

再來(lái)一次 – 再執行(xíng)一次“點擊開(kāi)始”。 

第 1 步：設置前置條件

示例中前置條件為(wèi)：進度條的寬度小(xiǎo)于背景框時(shí)。

此處用到了width屬性，元件的寬度。

第 2 步：填充 —— 調整進度條的寬度

元件變量Target，是指目标元件（被動方），與之對應的是This（當前元件，主動方）。可(kě)以這樣理(lǐ)解，A和(hé)B打架，A打了B一巴掌，那(nà)麽A就是this（主動方），就是target（被動方）。所以，可(kě)以用Target、This變量節省設置一些(xiē)局部變量。

此處用到了height屬性，元件的高(gāo)度。兩個(gè)公式的意思：寬自增1，高(gāo)不變。

使用常用變量有(yǒu)利于原型的遷移及變動。

思考一下：此處為(wèi)什麽不直接用數(shù)字？

第 3 步：更新百分比

計(jì)算(suàn)公式 —— 進度條寬度 除于 背景框寬度，再将該值轉換成百分值。

使用了math.floor()函數(shù)——[[Math.floor(JDT.width/BJK.width * 100)]]%

JDT.width/BJK.width —— 進度條寬度除于背景框寬度 的值，會(huì)帶有(yǒu)小(xiǎo)數(shù)點；

* 100 —— 百分号前面的數(shù)值，所以要乘以100；

math.floor() —— 返回小(xiǎo)于或等于一個(gè)給定數(shù)字的最大(dà)整數(shù)，去除小(xiǎo)數(shù)點。

例如：math.floor(99.9)得(de)出來(lái)的結果是99；

% —— 最後面的“%”純字符顯示，用于顯示。

第 4 步：等待 1 毫秒(miǎo)

根據自己想要的效果，自行(xíng)調整該值大(dà)小(xiǎo) —— 即等多(duō)久再執行(xíng)一次，體(tǐ)現到循環的速度上(shàng)面。切記一定要等待至少(shǎo) 1 毫秒(miǎo)，要不然循環會(huì)失敗。

注：不構成循環的情況，可(kě)以不用等待。

第 5 步：觸發事件

步驟：

選擇被觸發事件的元件 —— 此時(shí)是觸發自己，所以直接勾選當前元件；

配置被觸發的動作(zuò)：要該元件做(zuò)什麽？ —— 此時(shí)是要觸發該元件鼠标單擊動作(zuò)（因為(wèi)目前的方法都是配在該動作(zuò)裏面）。至此，進度條交互效果全部完成，快去預覽看一下效果吧(ba)！

寫在後面

觸發事件功能，相當于是調用已有(yǒu)方法。

即，當N個(gè)元件都要使用某一個(gè)方法時(shí)，以前的辦法是，複制(zhì)N份，後期調整一下非常不方便。若靈活使用觸發事件，節可(kě)以節省很(hěn)多(duō)重複的步驟，同時(shí)維護起來(lái)也會(huì)更方便一些(xiē)。

後期的教程中，将會(huì)看到更多(duō)的使用觸發事件的例子。

原型：普通(tōng)進度條