中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

先來看下效果圖，好看再繼續看，嘎嘎^_^

動態效果，速度可調節：

制作準備

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

2）需要用到的元件

文本標簽、圖片、矩形、全局變量

3）用到的技巧

• 全局變量判斷加載速度
• 選項組的妙用
• 使用觸發事件技巧替代動態面板的循環功能
• 使用網格視圖均分元件寬度

步驟

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

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

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

STEP 4：使用網格視圖設置用于均分進度條，快捷鍵F9

完成確認以后，如下圖所示：

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

STEP 6：同樣的方法復制一組，加上標簽

STEP 7：同樣的方法復制一組，帶圖片疊加效果（圖片需要轉換為動態面板并設置為平鋪）

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

STEP 8：動起來，我們復制一個頁面來實驗這部分內容

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

刪除一部分，只保留如下內容

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

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

大小42*20(參考）

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

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

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

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

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

接著我們為按鈕的單擊事件繼續還有加目標和行為，主要是單擊時更改全局變量的值，如慢點擊的時候把slow的值給speed，中的時候把middle的時候給speed。

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

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

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

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

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

目標“藍色”（*記住這個一個分組包括矩形和動態面板圖片的），尺寸是調整寬度，高度不變

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

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

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

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

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

此時啟動按鈕的事件如下

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

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

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

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

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

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

看下整體情況

運行看效果吧

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

本文由 @Evan 原創發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協議。