作者給大家分享了如何使用Axure rp9制作bootstrap 4進(jìn)度條，一起來看看~

今天跟大家分享的是制作漂亮的bootstrap 4進(jìn)度條，老規(guī)矩能動手的不花錢買，不會的先學(xué)，會的可以鞏固一下或者下載相關(guān)的組件成品直接使用。

先來看下效果圖，好看再繼續(xù)看，嘎嘎^_^

動態(tài)效果，速度可調(diào)節(jié)：

制作準(zhǔn)備

1)需要用的bootstrap 4主題色系如下

2）需要用到的元件

文本標(biāo)簽、圖片、矩形、全局變量

3）用到的技巧

• 全局變量判斷加載速度
• 選項組的妙用
• 使用觸發(fā)事件技巧替代動態(tài)面板的循環(huán)功能
• 使用網(wǎng)格視圖均分元件寬度

步驟

STEP 1：新建一個畫布，這里使用了系統(tǒng)預(yù)設(shè)的iphone8，也可以自定義或使用iphone11預(yù)設(shè)【注：iphone11預(yù)設(shè)需更新axure版本為9.0.0.3675及以上(beta版）】

STEP 2：畫一個標(biāo)題樣式，使用只顯示左邊框的方式

STEP 3：畫一個進(jìn)度條背景大小為375*16，顏色為#EEEEEE

STEP 4：使用網(wǎng)格視圖設(shè)置用于均分進(jìn)度條，快捷鍵F9

完成確認(rèn)以后，如下圖所示：

STEP 5：使用STEP 3的方法以及提供的顏色，畫出不同顏色的進(jìn)度條

STEP 6：同樣的方法復(fù)制一組，加上標(biāo)簽

STEP 7：同樣的方法復(fù)制一組，帶圖片疊加效果（圖片需要轉(zhuǎn)換為動態(tài)面板并設(shè)置為平鋪）

底紋圖片在引號內(nèi)，右鍵可另存為：“”，操作如下圖所示

STEP 8：動起來，我們復(fù)制一個頁面來實驗這部分內(nèi)容

在頁面面板中選種當(dāng)前的頁面，按ctrl+d快速復(fù)制一個，如下圖所示

刪除一部分，只保留如下內(nèi)容

命名和分組元件，以藍(lán)色的為例，分別命名為“進(jìn)度條_藍(lán)色”、“底紋”，組合這個兩元件命名為“藍(lán)色”，如下圖所示

接下來我們矩形工具添加一個按鈕用于切換進(jìn)度條的速度，命名為“慢”，值也為慢,背景色為#DC3545

大小42*20(參考）

接著為按鈕添加交互樣式，鼠標(biāo)懸停背景色和選種的背景色為#C82333，如下圖所示

為按鈕添加一個單擊交互事件，目標(biāo)“慢”，動作“設(shè)置選種”,這樣就達(dá)到鼠標(biāo)點擊選種的效果啦

同樣的方法復(fù)制兩個按鈕，分別命名和設(shè)置值為“中”、“快”

我們選種“慢”、“中”、“快”三個按鈕使用快捷鍵組合，組合名稱為“速度按鈕組”，并使用選項組功能統(tǒng)一分配到speed，方便每次單擊選種只能選種一種，如慢被選種，則中和快取消選種

接著我們需要定義一個全局變量，用于存放速度的狀態(tài)，變量名稱speed，默認(rèn)值slow表示慢,middle表示中，fast表示快

接著我們?yōu)榘粹o的單擊事件繼續(xù)還有加目標(biāo)和行為，主要是單擊時更改全局變量的值，如慢點擊的時候把slow的值給speed，中的時候把middle的時候給speed。

同樣的方法為“中”，“快”按鈕添加設(shè)置變量值分別為?middle 和fast

調(diào)整下按鈕組的位置，并添加一個文本速度選擇，看看效果

接下來，繼續(xù)添加一個矩形按鈕，同樣的方法設(shè)置背景色、鼠標(biāo)懸停的顏色這里我用的是分別是

#28A745和#218838，名字和值為“啟動”，圓角為4px

為“啟動”按鈕添加交互事件，我們要讓上面說到的“藍(lán)色”分組動起來，動起來就是設(shè)置元件尺寸

目標(biāo)“藍(lán)色”（*記住這個一個分組包括矩形和動態(tài)面板圖片的），尺寸是調(diào)整寬度，高度不變

使用局部變量的寬度屬性來完成自增長

如果是這樣手動點擊，從75px到,iphone 8的寬度375px,每次加1，細(xì)心的你會發(fā)手都會點酸，而且還需要加上情形控制，大于375px則完成100%的進(jìn)度了，不在再增加。接下來我們一步步的完善它，先來一個自動點擊的【觸發(fā)事件的秒用】，在頁面載入的時候我們就讓系統(tǒng)自動點擊“啟動”按鈕

這樣還不夠，還需要在啟動按鈕被點擊時觸發(fā)頁面載入時，這樣就循環(huán)利用起來了，好比高手打乒乓球一樣，你一個我一個中間不間斷，為啟動按鈕添加觸發(fā)事件

這里進(jìn)度條會一直走，速度也沒有感覺，太快了！加一個等待事件觀看效果，這里為100ms，值越小越快，1000ms=1s

讓進(jìn)度條的進(jìn)度值動起來，設(shè)置為文本，當(dāng)前寬度除以375表示占比，iphone 8的屏幕寬度375px并使用ceil函數(shù)向上取整最后加上一個%號，75/375=20%

此時啟動按鈕的事件如下

接著完善，加入情形判斷，防止進(jìn)度條超出屏幕寬度

繼續(xù)加入速度的判斷，并將情形1重命名為“進(jìn)度條百分比增長速度慢”，匹配所有條件

同樣的方法復(fù)制兩個情形，方別為“進(jìn)度條百分比增長速度中”、“進(jìn)度條百分比增長速度快”

變量值speed分別為middle、fast,等待時分別為10ms、5ms（也可以根據(jù)需要調(diào)整時間大小哦）

上面的方法中還漏了一項喲，就是每次判斷情形的時候還需要將不同的按鈕選種哦，表明這是當(dāng)前選擇的速度。分別為3種情形添加設(shè)置選種事件

最后我們在搞一個“重置”按鈕，方法和啟動差不多，事件不同，重置是當(dāng)進(jìn)度條為100%以后恢復(fù)之前的進(jìn)度，文本值也要恢復(fù)如100%恢復(fù)到20%，使用設(shè)置尺寸和設(shè)置文本事件就okay

看下整體情況

運行看效果吧

好了，若遇到問題的歡迎留言哦，么么噠！~

本文由 @Evan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。