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

先看效果：

涉及知識點：

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

實現(xiàn)目標：

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

難點：

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

以下是具體步驟

1. 準備素材

三個矩形：

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

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

問題思考：

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

（2）進度條

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

（3）開始按鈕

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

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

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

2. 動作設(shè)置

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

翻譯成大白話就是：

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

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

再來一次 – 再執(zhí)行一次“點擊開始”。

第1步：設(shè)置前置條件

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

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

第2步：填充 —— 調(diào)整進度條的寬度

元件變量Target，是指目標元件（被動方），與之對應(yīng)的是This（當前元件，主動方）。可以這樣理解，A和B打架，A打了B一巴掌，那么A就是this（主動方），就是target（被動方）。所以，可以用Target、This變量節(jié)省設(shè)置一些局部變量。

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

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

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

第3步：更新百分比

計算公式 —— 進度條寬度 除于 背景框?qū)挾?，再將該值轉(zhuǎn)換成百分值。

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

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

第4步：等待1毫秒

根據(jù)自己想要的效果，自行調(diào)整該值大小 —— 即等多久再執(zhí)行一次，體現(xiàn)到循環(huán)的速度上面。切記一定要等待至少1毫秒，要不然循環(huán)會失敗。

注：不構(gòu)成循環(huán)的情況，可以不用等待。

第5步：觸發(fā)事件

步驟：

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

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

寫在后面

觸發(fā)事件功能，相當于是調(diào)用已有方法。

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

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

原型：普通進度條

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

本文由 @?牧逸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議