進(jìn)度條我們經(jīng)常看到,想要使用axure制作一個(gè)百分比進(jìn)度條動(dòng)畫效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程。

1、為了說明效果,特意放置了3條進(jìn)度條,以示不同比例的效果,這里僅以一條進(jìn)度條做范本,如需其他數(shù)量進(jìn)度條可以按“復(fù)制+黏貼”方式實(shí)現(xiàn),無非再修改下顏色即可~
2、“進(jìn)度條”所需的素材不多:2個(gè)矩形和2個(gè)文本標(biāo)簽即可,如下圖所示:

3、按以下要求設(shè)置:
1)設(shè)置“文本標(biāo)簽“名稱(標(biāo)識(shí)):百分比
2)設(shè)置“文本標(biāo)簽“名稱(標(biāo)識(shí)):參數(shù);文本內(nèi)容:249(數(shù)值可隨意)
3)設(shè)置“矩形”名稱(標(biāo)識(shí)):總量;尺寸:500*10;填充色:#F0F0F0(可隨意)
4)設(shè)置“矩形”名稱(標(biāo)識(shí)):顏色進(jìn)度條;尺寸:10*10;填充色:#C8C8AD(可隨意)

4、按下圖布局方式組合:

5、這里只需針對(duì)“矩形:顏色進(jìn)度條“做交互效果,設(shè)定相關(guān)動(dòng)作:

6、以“矩形:總量“長度為總長度;設(shè)定總量是500;參數(shù)可任意設(shè)置小于500的任意數(shù)字;設(shè)定一個(gè)全局變量num,記錄百分比的數(shù)值
動(dòng)作1:設(shè)置“矩形:顏色進(jìn)度條“的長度
設(shè)置"文本框:參數(shù)"的內(nèi)容(即數(shù)值)為局部變量LVAR1
設(shè)置"文本框:總量"為局部變量LVAR2
所以”矩形:顏色進(jìn)度條“的長度為:[[LVAR1/500*LVAR2.width]]



動(dòng)作2:計(jì)算百分比
1)計(jì)算百分比
設(shè)置"文本框:參數(shù)"的內(nèi)容(即數(shù)值)為局部變量LVAR1
所以計(jì)算得”百分比“的數(shù)值為:[[LVAR1/500*100]]
(原本到這里可以結(jié)束了,但實(shí)際情況會(huì)發(fā)現(xiàn),計(jì)算出來的數(shù)值,會(huì)有很多小數(shù)點(diǎn),哈哈,這就不美觀了)

新聞熱點(diǎn)
疑難解答
圖片精選