Axure怎么制作百分比的進(jìn)度條動(dò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-04axure下拉框光標(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