Axure8怎么實現(xiàn)簡易的百分比進度條?
我要評論Axure8簡易進度條主要目的：
1.對交互用例的熟悉
2.元件樣式、布局工具數(shù)據(jù)
3.對變量的基本操作
一、分析
進度條：單位時間內(nèi)加載內(nèi)容在總內(nèi)容的百分比。
單位時間：例子中設(shè)定為固定時間
完成總時間：為演示效果設(shè)定為5s
加載完成判斷：元件 進度 的寬度等于背景的寬度。
二、界面布局
1、按照下圖拖放控件：兩個矩形、兩個三級標(biāo)題，并分別命名（標(biāo)題、進度文本、進度、背景）
2、設(shè)定 進度 和 背景頂部對齊，背景設(shè)定xywh(坐標(biāo)、寬、高：160 120 300 32),背景置于底部，進度設(shè)定xywh（161 121 1 30），進度顏色：#00FFFF。效果如下：
三、交互用例實現(xiàn)
1、添加交互用例：頁面載入時，找到：元件--設(shè)置文本,設(shè)置元件：標(biāo)題 的值為：“簡易進度條”，具體如下圖：
2、找到：元件--設(shè)置文本,設(shè)置元件：進度文本，設(shè)置為隱藏，具體見下圖：
3、找到：元件--設(shè)置尺寸,設(shè)置元件：進度，設(shè)置：錨點：左側(cè)，動畫：線性，時間：5000ms,具體見下圖：
4、點擊 寬 后的"FX",設(shè)置載入時元件“進度” 的寬度，添加局部變量“jindu”,插入函數(shù)：[[jindu.width-2]]（減去2個像素是背景框的線寬），變量：jindu 設(shè)置方法見下圖：
5、重要的一步：根據(jù)第二步（設(shè)置進度文本隱藏），在設(shè)置進度文本顯示：具體見下圖：
6、為進度文本 元件 添加交互用例：顯示時
7、元件--設(shè)置文本 設(shè)置元件：進度文本 為：
[[Math.floor(pjindu.width/(pbeijing.width-2)*100)]]%
說明：變量 pjindu 為進度元件 變量 pbeijing為 背景框 元件。
Math.floor： 向上取整數(shù)
具體方法如下：
8、重要一步：添加 其他-等待 設(shè)置時間為0即可，
然后：
設(shè)置隱藏文本（隱藏進度文本）
設(shè)置顯示文本 （顯示進度文本）
四、預(yù)覽
1、按下F5,預(yù)覽。
注意事項：
1、交互用例的第八步 添加等待事件，可以刪除以后進行測試效果如何。
2、對元件進行:隱藏 顯示 在觸發(fā)顯示事件 進行刷新元件
3、Axure最小寬度必須為1，優(yōu)化時可以先隱藏，然后再顯示元件：進度
相關(guān)推薦：
Axure8怎么使用動態(tài)面板?Axure8的使用教程
相關(guān)文章
Axure8怎么使用動態(tài)面板?Axure8的使用教程
Axure8怎么使用動態(tài)面板？經(jīng)常使用Axure繪制原型，Axure動態(tài)面板是最常使用的，今天我們就來詳細介紹一下Axure8的使用教程，很詳細，需要的朋友可以參考下2016-03-22- axure怎么繪制APP菜單阻尼滑動的原型圖？想要制作手機app，可以再axure中先將自己的構(gòu)思畫出來，今天我們就來看看axure中繪制APP菜單阻尼滑動的原型圖的方法，需要的朋友可2016-03-18
windows系統(tǒng)下axure 7.0 無法在發(fā)布中預(yù)覽的解決辦法
axure 7.0 無法在發(fā)布中預(yù)覽該怎么辦？我們在使用axure7.0繪制原型的時候，想預(yù)覽一下功能能不能實現(xiàn)，但是在預(yù)覽的時候發(fā)現(xiàn)不能預(yù)覽，該怎么辦呢？請看下文詳細介紹2016-02-29axure怎么做滑動效果? axure做手機觸摸屏幕滑動效果的方法
axure怎么做滑動效果？在axure中畫原型圖的時候，想在原型圖中加上效果，制作手機滑動屏幕的滑動效果該怎么做呢？下面分享axure做手機觸摸屏幕滑動效果的方法，需要的朋友2016-02-19Axure RP Pro 7.0怎么制作圖片輪播按鈕控制效果?
Axure RP Pro 7.0怎么制作圖片輪播按鈕控制效果？很多網(wǎng)頁中都有一個圖片輪播的功能，特別是娛樂和美食，有了圖片輪播是最吸引人眼球的，今天我們就教大家使用Axure實現(xiàn)這2016-01-08- Axure怎么給菜單設(shè)置旋轉(zhuǎn)效果？使用Axure繪制原型圖的時候，想給菜單做一些特效，這樣更吸引人，該怎么設(shè)置菜單旋轉(zhuǎn)時變大的效果呢？請看下文詳細的設(shè)置教程，需要的朋友可2015-12-18
- axure7.0怎么制作折疊和展開的菜單效果？折疊交互顯得網(wǎng)頁整齊，同時還給人一種動態(tài)的感覺，很好看，怎么制作的自由折疊和展開效果呢？下面分享axure7.0繪制的詳細過程，需2015-12-01
- Axure怎么制作頁面滾動時菜單固定在頂部的頁面？本文介紹如何做一個在滾動中將菜單固定在頂部的頁面，屬于中級Axure案例。本文旨在展示交互效果，不對頁面具體內(nèi)容和UI進行2015-07-10
- 用AxureRP 7.0怎么實現(xiàn)天貓登錄？其實很方便，只要簡單的應(yīng)用動態(tài)面板和屬性設(shè)置就可以輕松搞定了，下面我們一起來看看AxureRP 7.0實現(xiàn)天貓登錄的詳細教程2015-05-28
- Axure是設(shè)計師最常用的的原型設(shè)計工具之一，Axure RP 7.0版本相較6.5版本也有了比較大的改變。這里就介紹一下Axure RP 7.0的快捷鍵，需要的朋友可以看看2014-06-25