Axure8簡易進度條主要目的：

1.對交互用例的熟悉

2.元件樣式、布局工具數據

3.對變量的基本操作

一、分析

進度條：單位時間內加載內容在總內容的百分比。

單位時間：例子中設定為固定時間

完成總時間：為演示效果設定為5s

加載完成判斷：元件 進度 的寬度等于背景的寬度。

二、界面布局

1、按照下圖拖放控件：兩個矩形、兩個三級標題，并分別命名（標題、進度文本、進度、背景）

2、設定 進度 和 背景頂部對齊，背景設定xywh(坐標、寬、高：160 120 300 32),背景置于底部，進度設定xywh（161 121 1 30），進度顏色：#00FFFF。效果如下：

三、交互用例實現

1、添加交互用例：頁面載入時，找到：元件--設置文本,設置元件：標題 的值為：“簡易進度條”，具體如下圖：

2、找到：元件--設置文本,設置元件：進度文本，設置為隱藏，具體見下圖：

3、找到：元件--設置尺寸,設置元件：進度，設置：錨點：左側，動畫：線性，時間：5000ms,具體見下圖：

4、點擊 寬 后的"FX",設置載入時元件“進度” 的寬度，添加局部變量“jindu”,插入函數：[[jindu.width-2]]（減去2個像素是背景框的線寬），變量：jindu 設置方法見下圖：

5、重要的一步：根據第二步（設置進度文本隱藏），在設置進度文本顯示：具體見下圖：

6、為進度文本 元件 添加交互用例：顯示時

7、元件--設置文本   設置元件：進度文本 為：

[[Math.floor(pjindu.width/(pbeijing.width-2)*100)]]%

說明：變量 pjindu 為進度元件  變量 pbeijing為 背景框 元件。

Math.floor： 向上取整數

具體方法如下：

8、重要一步：添加 其他-等待 設置時間為0即可，

然后：

設置隱藏文本（隱藏進度文本） 

設置顯示文本  （顯示進度文本）

四、預覽

1、按下F5,預覽。

注意事項：

1、交互用例的第八步 添加等待事件，可以刪除以后進行測試效果如何。

2、對元件進行:隱藏 顯示 在觸發顯示事件 進行刷新元件

3、Axure最小寬度必須為1，優化時可以先隱藏，然后再顯示元件：進度

相關推薦：

axure7.0怎么制作折疊和展開的菜單效果?

Axure8怎么使用動態面板?Axure8的使用教程

Axure怎么制作頁面滾動時菜單固定在頂部的頁面？