進度條我們經?？吹剑胍褂胊xure制作一個百分比進度條動畫效果，該怎么制作呢？下面我們就來看看詳細的教程。

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

1、為了說明效果，特意放置了3條進度條，以示不同比例的效果，這里僅以一條進度條做范本，如需其他數量進度條可以按“復制+黏貼”方式實現，無非再修改下顏色即可~

2、“進度條”所需的素材不多：2個矩形和2個文本標簽即可，如下圖所示：

3、按以下要求設置：

1）設置“文本標簽“名稱（標識）：百分比

2）設置“文本標簽“名稱（標識）：參數；文本內容：249（數值可隨意）

3）設置“矩形”名稱（標識）：總量；尺寸：500*10；填充色：#F0F0F0（可隨意）

4）設置“矩形”名稱（標識）：顏色進度條；尺寸：10*10；填充色：#C8C8AD（可隨意）

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

5、這里只需針對“矩形：顏色進度條“做交互效果，設定相關動作：

6、以“矩形：總量“長度為總長度；設定總量是500；參數可任意設置小于500的任意數字；設定一個全局變量num，記錄百分比的數值

動作1：設置“矩形：顏色進度條“的長度

設置"文本框：參數"的內容（即數值）為局部變量LVAR1

設置"文本框：總量"為局部變量LVAR2

所以”矩形：顏色進度條“的長度為：[[LVAR1/500*LVAR2.width]]

動作2：計算百分比

1）計算百分比

設置"文本框：參數"的內容（即數值）為局部變量LVAR1

所以計算得”百分比“的數值為：[[LVAR1/500*100]]

（原本到這里可以結束了，但實際情況會發現，計算出來的數值，會有很多小數點，哈哈，這就不美觀了）