Axure8怎么實(shí)現(xiàn)簡(jiǎn)易的百分比進(jìn)度條?

發(fā)布時(shí)間：2016-03-23 15:05:18 作者：佚名

Axure8怎么實(shí)現(xiàn)簡(jiǎn)易的百分比進(jìn)度條？經(jīng)?？吹郊虞d數(shù)據(jù)的時(shí)候會(huì)出現(xiàn)進(jìn)度條，今天我們就來(lái)教大家Axure8中繪制進(jìn)度條的教程，很簡(jiǎn)單，需要的朋友可以參考下

Axure8簡(jiǎn)易進(jìn)度條主要目的：

1.對(duì)交互用例的熟悉

2.元件樣式、布局工具數(shù)據(jù)

3.對(duì)變量的基本操作

一、分析

進(jìn)度條：?jiǎn)挝粫r(shí)間內(nèi)加載內(nèi)容在總內(nèi)容的百分比。

單位時(shí)間：例子中設(shè)定為固定時(shí)間

完成總時(shí)間：為演示效果設(shè)定為5s

加載完成判斷：元件進(jìn)度的寬度等于背景的寬度。

二、界面布局

1、按照下圖拖放控件：兩個(gè)矩形、兩個(gè)三級(jí)標(biāo)題，并分別命名（標(biāo)題、進(jìn)度文本、進(jìn)度、背景）

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

三、交互用例實(shí)現(xiàn)

1、添加交互用例：頁(yè)面載入時(shí)，找到：元件--設(shè)置文本,設(shè)置元件：標(biāo)題的值為：“簡(jiǎn)易進(jìn)度條”，具體如下圖：

2、找到：元件--設(shè)置文本,設(shè)置元件：進(jìn)度文本，設(shè)置為隱藏，具體見(jiàn)下圖：

3、找到：元件--設(shè)置尺寸,設(shè)置元件：進(jìn)度，設(shè)置：錨點(diǎn)：左側(cè)，動(dòng)畫(huà)：線(xiàn)性，時(shí)間：5000ms,具體見(jiàn)下圖：

4、點(diǎn)擊寬后的"FX",設(shè)置載入時(shí)元件“進(jìn)度” 的寬度，添加局部變量“jindu”,插入函數(shù)：[[jindu.width-2]]（減去2個(gè)像素是背景框的線(xiàn)寬），變量：jindu 設(shè)置方法見(jiàn)下圖：