Axure:一個簡單的進度條,了解“觸發事件”動作
本文通過制作一個簡單的進度條,順便來了解一下“觸發事件”動作。
先看效果:
涉及知識點:
- “設置尺寸”動作;
- 元件變量:Target;
- 元件屬性:height(元件高度)、width(元件寬度);
- 數學函數:math.floor() – 返回小于或等于一個給定數字的最大整數 —— 算法;
- 了解“觸發事件”動作 —— 循環關鍵點;
- 了解“等待”動作?—— 與觖發動作結合使用才能有效循環;
- 了解動作執行的前提條件。
實現目標:
- 完成需求:點擊開始,進度條自動填充滿,并在此過程中不斷更新當前進度 – 百分比;
- 練習目的:通過使用“觸發事件”,完成自循環及停止循環。有別于常用的動態面板循環機制。
難點:
如果只是自動充滿,那么用一下設置尺寸,加一個動畫就可以搞定。但是這個百分比一直在變,就需要動一點點小心思了。
以下是具體步驟
1. 準備素材
三個矩形:
(1)背景框 – 命名為背景框
- 填充顏色:不透明度0(即全透明)—— 目的:底下的進度條變化時能看到 —— 重要;
- 元件寬高:400 * 40 ——?重要,但可自動設置;
- 元件層級:置于頂層(至少要保持在進度條的上面) —— 重要;
- 默認文字:0% —— 不重要,可無任何文字。后期動作執行之后會自動顯示;
- 文字大小、文字顏色、文字排版、線段等都不重要,可自動設置。
問題思考:
- 為什么填充顏色是全透明的,文字及邊框還可見呢?
- 怎么設置能讓它們一起透明呢?
(2)進度條
- 填充顏色:與背景色不同即可 —— 此用例使用的是CCCCCC,可自行設置其他顏色 —— 重要;
- 元件寬高:1 * 40 —— 默認是進度是0,所以寬為0,但是axure元件寬高的最小值只能到1,故此處是1。高不可大于背景框的高 —— 重要;
- 元件層級:置于底層(至少要保持在背景框的下面) —— 重要;
- 元件位置:等于背景框位置(左上角);
- 不要放文字。
(3)開始按鈕
無特殊說明,可自行設置。用于交互動作(此處是點擊)。
也可以省去此元件,直接將交互動作放置于“背景框”,或者頁面載入時……
由到進度條為寬度1,與背景框的邊線重合了,故好像沒有進度條。
2. 動作設置
梳理一下進度條執行的邏輯,嘗試畫個流程圖。
翻譯成大白話就是:
如果進度條滿了,就不執行(什么都不做),如果沒滿就:
- 改變進度條的寬度;
- 更新百分比;
- 等待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)]]%
- JDT.width/BJK.width ——?進度條寬度除于背景框寬度 的值,會帶有小數點;
- * 100 —— 百分號前面的數值,所以要乘以100;
- math.floor() —— 返回小于或等于一個給定數字的最大整數,去除小數點。例如:math.floor(99.9)得出來的結果是99;
- % —— 最后面的“%”純字符顯示,用于顯示。
第4步:等待1毫秒
根據自己想要的效果,自行調整該值大小 —— 即等多久再執行一次,體現到循環的速度上面。切記一定要等待至少1毫秒,要不然循環會失敗。
注:不構成循環的情況,可以不用等待。
第5步:觸發事件
步驟:
- 選擇被觸發事件的元件 —— 此時是觸發自己,所以直接勾選當前元件;
- 配置被觸發的動作:要該元件做什么? —— 此時是要觸發該元件鼠標單擊動作(因為目前的方法都是配在該動作里面)。
至此,進度條交互效果全部完成,快去預覽看一下效果吧!
寫在后面
觸發事件功能,相當于是調用已有方法。
即,當N個元件都要使用某一個方法時,以前的辦法是,復制N份,后期調整一下非常不方便。若靈活使用觸發事件,節可以節省很多重復的步驟,同時維護起來也會更方便一些。
后期的教程中,將會看到更多的使用觸發事件的例子。
原型:普通進度條
下載地址:https://quqi.com/s/787633/xMkC449Za4eGia6I/23 無須密碼
本文由 @?牧逸 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Pexels,基于 CC0 協議
在畫布中移動原型的位置(或復制多份在不同的位置) 預覽時會出現不同現象的問題,比如進度條無限延長或者進度條不延長。你的原型也存在這個問題
如果我要讓它加載到一半可以暫停,然后再繼續怎么去設置呢?
可以參考一下這篇說明:http://www.aharts.cn/rp/1385096.html
然后如果要暫停、要繼續執行如何操作呢?
那么目的,就是讓其停止循環,繼續循環
簡單一點的辦法就是,增加一個判斷條件里面加一個全局變量
即,同時滿足以下兩個條件時,才繼續循環
1、全局變量 == x(例如:0)
2、原來的條件
那么,就是加一個用例,改變一下全局變量的就可以了
我也設置了進度條寬度小于背景框寬度執行,每次執行后的背景和進度條的寬度是原來長度翻了一倍
兩個元件的寬度都變了?這不合理吧。
1、再檢查一下事件哪里錯了
2、下載一下原件,對比看看
如果還是不行,再留言
我也是出現了這種情況,但是把單個頁面導出去預覽又是正常的,這是為什么呢?
可以參考一下這篇說明:http://www.aharts.cn/rp/1385096.html
請問鹵煮能提供百度盤或者藍湊云下載鏈接嗎