Axure怎么制作百分比的進(jìn)度條動畫?

進(jìn)度條我們經(jīng)??吹剑胍褂胊xure制作一個百分比進(jìn)度條動畫效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程。

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