歡迎訪問

云南鼎浩信息技術有限公司官方網站,云南網站建設誠信品牌!

鼎浩網絡,云南鼎浩信息技術有限公司

鼎浩客服熱線

DING HAO COLUMN 鼎浩專欄

鼎浩的一些分享
Sharing from Ding Hao

  • 鼎浩服務
  • 1

Axure:一個簡單的進度條,了解“觸發事件”動作

來源:站長之家     2018年08月17日46:09
字號:T|T


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

先看效果:


涉及知識點:

“設置尺寸”動作;

元件變量: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份,后期調整一下非常不方便。若靈活使用觸發事件,節可以節省很多重復的步驟,同時維護起來也會更方便一些。

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

原型:普通進度條?


?

客服中心
點擊進行在線咨詢

QQ咨詢 咨詢QQ:79929313 咨詢QQ:88139574 咨詢QQ:122790803

咨詢熱線:0871-63399840

客服熱線:0871-63523332

客服中心 客服中心
台湾麻将牌 988619942979515473846913448698620142220643732386319767855500542480090059639225125454183583707486 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();