本文通過製作一個簡單的進度條，順便來了解一下“觸發事件”動作。
先看效果：
涉及知識點：
- “設置尺寸”動作；
- 元件變量：Target；
- 元件屬性：height（元件高度）、width（元件寬度）；
- 數學函數：math.floor – 返回小於或等於一個給定數字的最大整數 —— 算法；
- 瞭解“觸發事件”動作 —— 循環關鍵點；
- 瞭解“等待”動作 —— 與觖發動作結合使用才能有效循環；
- 瞭解動作執行的前提條件。
實現目標：
- 完成需求：點擊開始，進度條自動填充滿，並在此過程中不斷更新當前進度– 百分比；
- 練習目的：通過使用“觸發事件”，完成自循環及停止循環。有別於常用的動態面板循環機制。
難點：
如果只是自動充滿，那麼用一下設置尺寸，加一個動畫就可以搞定。但是這個百分比一直在變，就需要動一點點小心思了。
以下是具體步驟
1. 準備素材
三個矩形：
（1）背景框 – 命名為背景框
- 填充顏色：不透明度0（即全透明）—— 目的：底下的進度條變化時能看到 —— 重要；
- 元件寬高：400 * 40 —— 重要，但可自動設置；
- 元件層級：置於頂層（至少要保持在進度條的上面） —— 重要；
- 默認文字：0% —— 不重要，可無任何文字。後期動作執行之後會自動顯示；
- 文字大小、文字顏色、文字排版、線段等都不重要，可自動設置。
問題思考：
- 為什麼填充顏色是全透明的，文字及邊框還可見呢？
- 怎麼設置能讓它們一起透明呢？
（2）進度條
- 填充顏色：與背景色不同即可 —— 此用例使用的是CCCCCC，可自行設置其他顏色 —— 重要；
- 元件寬高：1 * 40 —— 默認是進度是0，所以寬為0，但是axure元件寬高的最小值只能到1，故此處是1。高不可大於背景框的高 —— 重要；
- 元件層級： 置於底層（至少要保持在背景框的下面） —— 重要；
- 元件位置：等於背景框位置（左上角）；
- 不要放文字。
（3）開始按鈕
無特殊說明，可自行設置。用於交互動作（此處是點擊）。
也可以省去此元件，直接將交互動作放置於“背景框”，或者頁面載入時……
由到進度條為寬度1，與背景框的邊線重合了，故好像沒有進度條。
2. 動作設置
梳理一下進度條執行的邏輯，嘗試畫個流程圖。
翻譯成大白話就是：
如果進度條滿了，就不執行（什麼都不做），如果沒滿就：
再來一次 – 再執行一次“點擊開始”。
第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)]]%
- JDT.width/BJK.width —— 進度條寬度除於背景框寬度 的值，會帶有小數點；
- * 100 —— 百分號前面的數值，所以要乘以100；
- math.floor —— 返回小於或等於一個給定數字的最大整數，去除小數點。例如：math.floor(99.9)得出來的結果是99；
- % —— 最後面的“%”純字符顯示，用於顯示。
第4步：等待1毫秒
根據自己想要的效果，自行調整該值大小 —— 即等多久再執行一次，體現到循環的速度上面。切記一定要等待至少1毫秒，要不然循環會失敗。
注：不構成循環的情況，可以不用等待。
第5步：觸發事件
步驟：
- 選擇被觸發事件的元件 —— 此時是觸發自己，所以直接勾選當前元件；
- 配置被觸發的動作：要該元件做什麼？ —— 此時是要觸發該元件鼠標單擊動作（因為目前的方法都是配在該動作裡面）。
至此，進度條交互效果全部完成，快去預覽看一下效果吧！
寫在後面
觸發事件功能，相當於是調用已有方法。
即，當N個元件都要使用某一個方法時，以前的辦法是，複製N份，後期調整一下非常不方便。若靈活使用觸發事件，節可以節省很多重複的步驟，同時維護起來也會更方便一些。
後期的教程中，將會看到更多的使用觸發事件的例子。
題圖來自 Pexels，基於 CC0 協議
閱讀更多 人人都是產品經理 的文章
