Axure制作出百分比進度條動畫具體操作流程
近幾天很多使用Axure的用戶們詢問小編怎么制作粗百分比進度條動畫?下文就為大伙帶來了Axure制作出百分比進度條動畫的具體操作流程 。
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]]
(原本到這里可以結束了 ， 但實際情況會發現，計算出來的數值，會有很多小數點，哈哈，這就不美觀了)
2)百分比格式化：保留2位小數格式化用到的函數：[[num.toFixed(2)]]---
3)設置“文本標簽：百分比”為計算所得的數值([[num.toFixed(2)]]%)
4)“矩形：顏色進度條“的所有動作如下圖所示：
到這里就設置結束了 ， 很是簡單，一切設置正確，效果就如下：
【Axure制作出百分比進度條動畫具體操作流程】根據上文為你們分享的Axure制作出百分比進度條動畫的具體操作流程，你們是不是都學會啦!
