Axure 乙個簡單的進度條,了解「觸發事件」動作

2022-09-21 07:51:10 字數 1287 閱讀 3697

本文通過製作乙個簡單的進度條,順便來了解一下「觸發事件」動作。

先看效果:

涉及知識點:

實現目標:

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

三個矩形:

(1)背景框 – 命名為背景框

問題思考:

(2)進度條

(3)開始按鈕

無特殊說明,可自行設定。用於互動動作(此處是點選)。

也可以省去此元件,直接將互動動作放置於「背景框」,或者頁面載入時……

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

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

翻譯成大白話就是:

如果進度條滿了,就不執行(什麼都不做),如果沒滿就:

再來一次 – 再執行一次「點選開始」。

第 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)]]%

第 4 步:等待 1 毫秒

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

注:不構成迴圈的情況,可以不用等待。

第 5 步:觸發事件

步驟:至此,進度條互動效果全部完成,快去預覽看一下效果吧!

觸發事件功能,相當於是呼叫已有方法。

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

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

原型:普通進度條

**位址: 無須密碼

本文位址:

實現乙個簡單的進度條

1 首先我們用固定在左右兩邊,中間預留空間,然後用 進行填充在這裡我們用 表示1 通過增加字元 來保證進度的增加。printf 100s r str 格式化輸出。表示左對齊 100表示列寬,r 表示回車,即每 次列印完使游標回到行首在這裡需要解釋一下 r 和 n 這兩個概念 回車 r 表示回到當前行...

shell實現乙個簡單進度條

用命令test或 測試乙個條件是否成立。如果測試條件為真,命令的exit status為0,測試條件為假,exit status為1。這裡輸入的數字比10大,條件成立為0,比10小條件不成立為1.整數比較 lt 小於 le 小於等於 gt 大於 ge 大於等於 eq 等於 ne 不等於 測試命令 與...

Android乙個簡單易用的進度條

進行網路載入,為了使用者體驗,常常要用到進度條,我就找到乙個很方便的用法 private static final int messagetype 01 0x0001 private progressdialog progressdialog null 以下的方法是 private void pro...