欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

百度經(jīng)驗   發(fā)布時間:2018-08-15 14:13:15   作者:goodbyte01   我要評論
Axure怎么制作百分比的進(jìn)度條動畫?Axure中想要制作百分比的進(jìn)度條,該怎么制作進(jìn)度條并添加動畫效果恩?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下

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

 

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)推薦:

Axure RP 8怎么制作倒計時動畫?

Axure8怎么實現(xiàn)簡易的百分比進(jìn)度條?

Axure RP 8怎么給下拉列表框添加多個值?

相關(guān)文章

  • axure簡單的流程圖怎么繪制?

    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è)計QQ登錄界面交互效果?axure中設(shè)計網(wǎng)頁原型很簡單,該怎么設(shè)計qq登陸的頁面呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下
    2018-07-17
  • Axure網(wǎng)頁怎么添加樹狀控件?

    Axure網(wǎng)頁怎么添加樹狀控件?Axure中想要直走樹狀的折疊菜單,該怎么制作呢?下面我們就來看看詳細(xì)的教程,很簡單,需要的朋友可以參考下
    2018-07-06
  • Axure怎么創(chuàng)建母版和使用?

    Axure怎么創(chuàng)建母版和使用?Axure中母版是經(jīng)常會用的,該怎么創(chuàng)建母版呢?下面我們就來看看axure創(chuàng)建母版的教程,需要的朋友可以參考下
    2018-07-04
  • Axure怎么制作控件隨鼠標(biāo)移動的效果?

    Axure怎么制作控件隨鼠標(biāo)移動的效果?Axure中創(chuàng)建的方框和熱區(qū)想要制作跟隨鼠標(biāo)移動的效果,該怎么制作呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下
    2018-07-04
  • axure下拉框光標(biāo)閃動效果怎么制作?

    axure下拉框光標(biāo)閃動效果怎么制作?很多網(wǎng)頁下拉輸入框中光標(biāo)都是閃爍的,等待輸入的效果,該怎么制作這個效果呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下
    2018-06-28
  • Axure RP怎么制作彈出菜單的效果?

    Axure RP怎么制作彈出菜單的效果?Axure中制作網(wǎng)頁原型很簡單,想要制作一個彈出式的菜單,該怎么弄制作這個效果呢?下面我們就來看看詳細(xì)的教程,需要的朋友可以參考下
    2018-06-26
  • axure元件庫怎么卸載 axure卸載元件庫教程

    axure元件庫怎么卸載?axur元件庫可以自己建立或者刪除,該怎么卸載元件庫呢?下面我們就來看看axure卸載元件庫教程,需要的朋友可以參考下
    2018-06-20
  • Axure圖片交互樣式有哪些?

    Axure圖片交互樣式有哪些?Axure中圖片交互樣式種類挺多的,今天我們就來一一介紹關(guān)于圖片交互樣式的簡單知識,需要的朋友可以參考下
    2018-06-19

最新評論