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

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

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

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

制作準(zhǔn)備

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

2）需要用到的元件

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

3）用到的技巧

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

步驟

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

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

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

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

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

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

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

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

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

STEP 8：動(dòng)起來(lái)，我們復(fù)制一個(gè)頁(yè)面來(lái)實(shí)驗(yàn)這部分內(nèi)容

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

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

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

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

大小42*20(參考）

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

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

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

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

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

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

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

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

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

#28A745和#218838，名字和值為“啟動(dòng)”，圓角為4px

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

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

使用局部變量的寬度屬性來(lái)完成自增長(zhǎng)

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

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

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

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

此時(shí)啟動(dòng)按鈕的事件如下

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

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

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

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

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

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

看下整體情況

運(yùn)行看效果吧

好了，若遇到問(wèn)題的歡迎留言哦，么么噠！~

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

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