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

軟件名稱：Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機(jī)+漢化包+安裝教程)軟件大小：83.2MB更新時(shí)間：2019-04-26

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)，哈哈，這就不美觀了）