本文通過制作一個簡單的進度條，順便來了解一下“觸發事件”動作。

先看效果：

涉及知識點：

• “設置尺寸”動作；
• 元件變量：Target；
• 元件屬性：height（元件高度）、width（元件寬度）；
• 數學函數：math.floor() – 返回小于或等于一個給定數字的最大整數 —— 算法；
• 了解“觸發事件”動作 —— 循環關鍵點；
• 了解“等待”動作?—— 與觖發動作結合使用才能有效循環；
• 了解動作執行的前提條件。

實現目標：

1. 完成需求：點擊開始，進度條自動填充滿，并在此過程中不斷更新當前進度 – 百分比；
2. 練習目的：通過使用“觸發事件”，完成自循環及停止循環。有別于常用的動態面板循環機制。

難點：

如果只是自動充滿，那么用一下設置尺寸，加一個動畫就可以搞定。但是這個百分比一直在變，就需要動一點點小心思了。

以下是具體步驟

1. 準備素材

三個矩形：

（1）背景框 – 命名為背景框

• 填充顏色：不透明度0（即全透明）—— 目的：底下的進度條變化時能看到 —— 重要；
• 元件寬高：400 * 40 ——?重要，但可自動設置；
• 元件層級：置于頂層（至少要保持在進度條的上面） —— 重要；
• 默認文字：0% —— 不重要，可無任何文字。后期動作執行之后會自動顯示；
• 文字大小、文字顏色、文字排版、線段等都不重要，可自動設置。

問題思考：

1. 為什么填充顏色是全透明的，文字及邊框還可見呢？
2. 怎么設置能讓它們一起透明呢？

（2）進度條

• 填充顏色：與背景色不同即可 —— 此用例使用的是CCCCCC，可自行設置其他顏色 —— 重要；
• 元件寬高：1 * 40 —— 默認是進度是0，所以寬為0，但是axure元件寬高的最小值只能到1，故此處是1。高不可大于背景框的高 —— 重要；
• 元件層級：置于底層（至少要保持在背景框的下面） —— 重要；
• 元件位置：等于背景框位置（左上角）；
• 不要放文字。

（3）開始按鈕

無特殊說明，可自行設置。用于交互動作（此處是點擊）。

也可以省去此元件，直接將交互動作放置于“背景框”，或者頁面載入時……

由到進度條為寬度1，與背景框的邊線重合了，故好像沒有進度條。

2. 動作設置

梳理一下進度條執行的邏輯，嘗試畫個流程圖。

翻譯成大白話就是：

如果進度條滿了，就不執行（什么都不做），如果沒滿就：

1. 改變進度條的寬度；
2. 更新百分比；
3. 等待1毫秒。

再來一次 – 再執行一次“點擊開始”。

第1步：設置前置條件

示例中前置條件為：進度條的寬度小于背景框時。

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

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

元件變量Target，是指目標元件（被動方），與之對應的是This（當前元件，主動方）?？梢赃@樣理解，A和B打架，A打了B一巴掌，那么A就是this（主動方），就是target（被動方）。所以，可以用Target、This變量節省設置一些局部變量。

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

使用常用變量有利于原型的遷移及變動。

思考一下：此處為什么不直接用數字？

第3步：更新百分比

計算公式 —— 進度條寬度 除于 背景框寬度，再將該值轉換成百分值。

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

1. JDT.width/BJK.width ——?進度條寬度除于背景框寬度 的值，會帶有小數點；
2. * 100 —— 百分號前面的數值，所以要乘以100；
3. math.floor() —— 返回小于或等于一個給定數字的最大整數，去除小數點。例如：math.floor(99.9)得出來的結果是99；
4. % —— 最后面的“%”純字符顯示，用于顯示。

第4步：等待1毫秒

根據自己想要的效果，自行調整該值大小 —— 即等多久再執行一次，體現到循環的速度上面。切記一定要等待至少1毫秒，要不然循環會失敗。

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

第5步：觸發事件

步驟：

1. 選擇被觸發事件的元件 —— 此時是觸發自己，所以直接勾選當前元件；
2. 配置被觸發的動作：要該元件做什么？ —— 此時是要觸發該元件鼠標單擊動作（因為目前的方法都是配在該動作里面）。

至此，進度條交互效果全部完成，快去預覽看一下效果吧！

寫在后面

觸發事件功能，相當于是調用已有方法。

即，當N個元件都要使用某一個方法時，以前的辦法是，復制N份，后期調整一下非常不方便。若靈活使用觸發事件，節可以節省很多重復的步驟，同時維護起來也會更方便一些。

后期的教程中，將會看到更多的使用觸發事件的例子。

原型：普通進度條

下載地址：https://quqi.com/s/787633/xMkC449Za4eGia6I/23 無須密碼

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

題圖來自 Pexels，基于 CC0 協議