Axure怎么制作百分比的進(jìn)度條動(dòng)畫?
我要評(píng)論進(jìn)度條我們經(jīng)?？吹?，想要使用axure制作一個(gè)百分比進(jìn)度條動(dòng)畫效果，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程。
Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊(cè)機(jī)+漢化包+安裝教程)
- 類型：輔助設(shè)計(jì)
- 大?。?/span>83.2MB
- 語(yǔ)言：簡(jiǎn)體中文
- 時(shí)間：2019-04-26
1、為了說(shuō)明效果，特意放置了3條進(jìn)度條，以示不同比例的效果，這里僅以一條進(jìn)度條做范本，如需其他數(shù)量進(jìn)度條可以按“復(fù)制+黏貼”方式實(shí)現(xiàn)，無(wú)非再修改下顏色即可~
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、以“矩形：總量“長(zhǎng)度為總長(zhǎng)度；設(shè)定總量是500；參數(shù)可任意設(shè)置小于500的任意數(shù)字；設(shè)定一個(gè)全局變量num，記錄百分比的數(shù)值
動(dòng)作1：設(shè)置“矩形：顏色進(jìn)度條“的長(zhǎng)度
設(shè)置"文本框：參數(shù)"的內(nèi)容（即數(shù)值）為局部變量LVAR1
設(shè)置"文本框：總量"為局部變量LVAR2
所以”矩形：顏色進(jìn)度條“的長(zhǎng)度為：[[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ì)算出來(lái)的數(shù)值，會(huì)有很多小數(shù)點(diǎn)，哈哈，這就不美觀了）
2）百分比格式化：保留2位小數(shù)格式化用到的函數(shù)：[[num.toFixed(2)]]---
3）設(shè)置“文本標(biāo)簽：百分比”為計(jì)算所得的數(shù)值（[[num.toFixed(2)]]%）
4）“矩形：顏色進(jìn)度條“的所有動(dòng)作如下圖所示：
到這里就設(shè)置結(jié)束了，很是簡(jiǎn)單，一切設(shè)置正確，效果就如下：
以上就是Axure百分比的進(jìn)度條動(dòng)畫的制作方法，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
Axure RP 8怎么制作倒計(jì)時(shí)動(dòng)畫?
Axure8怎么實(shí)現(xiàn)簡(jiǎn)易的百分比進(jìn)度條?
相關(guān)文章
axure簡(jiǎn)單的流程圖怎么繪制？axure設(shè)計(jì)網(wǎng)頁(yè)原型很方便，想要設(shè)計(jì)流程圖該怎么設(shè)計(jì)呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-27
Axure怎么設(shè)計(jì)網(wǎng)頁(yè)強(qiáng)密碼驗(yàn)證效果?
Axure怎么設(shè)計(jì)網(wǎng)頁(yè)強(qiáng)密碼驗(yàn)證效果？現(xiàn)在網(wǎng)頁(yè)的密碼越來(lái)越復(fù)雜，想要制作一個(gè)密碼驗(yàn)證，該怎么制作這個(gè)網(wǎng)頁(yè)圓形呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-17
axure怎么設(shè)計(jì)QQ登錄界面交互效果？axure中設(shè)計(jì)網(wǎng)頁(yè)原型很簡(jiǎn)單，該怎么設(shè)計(jì)qq登陸的頁(yè)面呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-17
Axure網(wǎng)頁(yè)怎么添加樹狀控件？Axure中想要直走樹狀的折疊菜單，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，很簡(jiǎn)單，需要的朋友可以參考下2018-07-06
Axure怎么創(chuàng)建母版和使用？Axure中母版是經(jīng)常會(huì)用的，該怎么創(chuàng)建母版呢？下面我們就來(lái)看看axure創(chuàng)建母版的教程，需要的朋友可以參考下2018-07-04
Axure怎么制作控件隨鼠標(biāo)移動(dòng)的效果?
Axure怎么制作控件隨鼠標(biāo)移動(dòng)的效果？Axure中創(chuàng)建的方框和熱區(qū)想要制作跟隨鼠標(biāo)移動(dòng)的效果，該怎么制作呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-07-04
axure下拉框光標(biāo)閃動(dòng)效果怎么制作?
axure下拉框光標(biāo)閃動(dòng)效果怎么制作？很多網(wǎng)頁(yè)下拉輸入框中光標(biāo)都是閃爍的，等待輸入的效果，該怎么制作這個(gè)效果呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-06-28
Axure RP怎么制作彈出菜單的效果？Axure中制作網(wǎng)頁(yè)原型很簡(jiǎn)單，想要制作一個(gè)彈出式的菜單，該怎么弄制作這個(gè)效果呢？下面我們就來(lái)看看詳細(xì)的教程，需要的朋友可以參考下2018-06-26
axure元件庫(kù)怎么卸載 axure卸載元件庫(kù)教程
axure元件庫(kù)怎么卸載？axur元件庫(kù)可以自己建立或者刪除，該怎么卸載元件庫(kù)呢？下面我們就來(lái)看看axure卸載元件庫(kù)教程，需要的朋友可以參考下2018-06-20
Axure圖片交互樣式有哪些？Axure中圖片交互樣式種類挺多的，今天我們就來(lái)一一介紹關(guān)于圖片交互樣式的簡(jiǎn)單知識(shí)，需要的朋友可以參考下2018-06-19
