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]]
（原本到這里可以結束了，但實際情況會發(fā)現，計算出來的數值，會有很多小數點，哈哈，這就不美觀了）
2）百分比格式化：保留2位小數格式化用到的函數：[[num.toFixed(2)]]---
3）設置“文本標簽：百分比”為計算所得的數值（[[num.toFixed(2)]]%）
4）“矩形：顏色進度條“的所有動作如下圖所示：
到這里就設置結束了，很是簡單，一切設置正確，效果就如下：
以上就是Axure百分比的進度條動畫的制作方法，希望大家喜歡，請繼續(xù)關注腳本之家。
相關推薦：
相關文章
axure簡單的流程圖怎么繪制？axure設計網頁原型很方便，想要設計流程圖該怎么設計呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-07-27
Axure怎么設計網頁強密碼驗證效果？現在網頁的密碼越來越復雜，想要制作一個密碼驗證，該怎么制作這個網頁圓形呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-07-17
axure怎么設計QQ登錄界面交互效果？axure中設計網頁原型很簡單，該怎么設計qq登陸的頁面呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-07-17
Axure網頁怎么添加樹狀控件？Axure中想要直走樹狀的折疊菜單，該怎么制作呢？下面我們就來看看詳細的教程，很簡單，需要的朋友可以參考下2018-07-06
Axure怎么創(chuàng)建母版和使用？Axure中母版是經常會用的，該怎么創(chuàng)建母版呢？下面我們就來看看axure創(chuàng)建母版的教程，需要的朋友可以參考下2018-07-04
Axure怎么制作控件隨鼠標移動的效果？Axure中創(chuàng)建的方框和熱區(qū)想要制作跟隨鼠標移動的效果，該怎么制作呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-07-04
axure下拉框光標閃動效果怎么制作？很多網頁下拉輸入框中光標都是閃爍的，等待輸入的效果，該怎么制作這個效果呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-06-28
Axure RP怎么制作彈出菜單的效果？Axure中制作網頁原型很簡單，想要制作一個彈出式的菜單，該怎么弄制作這個效果呢？下面我們就來看看詳細的教程，需要的朋友可以參考下2018-06-26
axure元件庫怎么卸載？axur元件庫可以自己建立或者刪除，該怎么卸載元件庫呢？下面我們就來看看axure卸載元件庫教程，需要的朋友可以參考下2018-06-20
Axure圖片交互樣式有哪些？Axure中圖片交互樣式種類挺多的，今天我們就來一一介紹關于圖片交互樣式的簡單知識，需要的朋友可以參考下2018-06-19
