很實用的進度條外掛ProgressBar.js

非梧不棲發表於2018-06-27
JS

ProgressBar.js配置引數詳解

1，介紹

它是響應式的建立SVG元素的一個外掛。不要慌，不懂SVG也沒有關係，外掛的使用，主要是對配置引數的理解。

  • 這是ProgressBar.js的網站，有動效的展示（我截的靜態的圖。。。），在如下圖所示，右擊小鉛筆，在新的頁面中開啟網頁，就可以看到小demo的全部程式碼了。
    很實用的進度條外掛ProgressBar.js
  • 這是官方配置引數的文件，我會在下面的程式碼中，詳解。
  • 進度條的效果，常見的就是長條形和圓形。當然也可以自定義形狀，這裡就不做討論了。

2，案例

下面的2個demo，一個是實現的長條形的，一個是圓形，因為配置引數有所不同，所以分開介紹。

2.1 長條形

很實用的進度條外掛ProgressBar.js

<!--首先，需要引入外掛-->
<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.js"></script>
<script>
  // 獲取容器節點
  let container = document.querySelector('#container')
  
  /*
  * 先介紹稍微難理解的引數
  * 首先，進度條的實現，要有一個準備填充的矩形作為背景被填充，還要有一個進行填充的矩形。
  *   所以，兩個矩形肯定是重疊在一起的。而這些生成的矩形，就是以SVG元素的形式顯示。
  * @strokeWidth 跟蹤路徑，指慢慢邊長，進行填充的那個矩形。
  * @trailWidth 未填充路徑，指作為背景被填充的矩形。
  * @svgStyle SVG元素（2個矩形）面積佔容器的百分比。
  * */

  /*
  * 結論先行：一般顯示的效果，strokeWidth和trailWidth這2個的值，只需要設定strokeWidth: 1 即可。
  * 原因：
  * strokeWidth的值number型別，表示跟路徑的高度佔容器的百分比，
  *   所以，數值為1就已經佔滿容器的高度，>1會有副作用，下面會介紹。
  * trailWidth的值number型別，表示未填充路徑的高度佔容器的百分比，
  *   如果不設定，預設等於strokeWidth的值，並且會被strokeWidth影響到：
  *   所以它最終的值：trailWidth=(trailWidth/strokeWidth)*height（height為容器高度）
  * 也就是說，strokeWidth和trailWidth的值同時設定，且不相等時，trailWidth的值可能不會如預期效果顯示。
  * */
  let bar = new ProgressBar.Line(container, {
    strokeWidth: 1, // 跟蹤路徑的高度
    easing: 'easeInOut',  // 運動形式，預設是linear（勻速運動），easeInOut代表慢-快-慢，該配置項具體可以參照CSS3中transition的過渡形式
    duration: 5000,  // 走完整體時間（ms）
    color: 'salmon',  // 跟蹤路徑顏色（單詞，16進位制，rgb都可以）
    trailColor: 'blue',   // 未填充路徑顏色（同上）
    trailWidth: 1,  // 未填充路徑的高度
    svgStyle: {width: '100%', height: '100%'},   // 2個路徑整體的寬高
    text: {   // 顯示百分比文字的樣式，最終生成放文字內容的容器是一個div
      // className可以指定文字容器的class名稱，但是注意，所有在配置項style中寫的樣式都會轉為內聯樣式，
      // 並且像color這種不設定，會繼承其他配置項的樣式，也會設定為內聯樣式。
      className: 'text-color',
      // 百分比文字的樣式
      style: {
        color: 'green',   // 不設定的話，繼承跟蹤路徑顏色
        position: 'absolute',
        textAlign: 'right',
        top: '0',
        padding: 0,
        margin: 0,
        // 如果要設定transform，直接設定，親測好像不行，只能按照官網給出的寫法。
        transform: {
          prefix: true,  // 自動加瀏覽器字首
          value: 'translate(-100%, 70%)'
        }
      },
      // 一旦上面的style選項中寫了樣式，則自動會給容器新增position: relative;
      //（我覺得主要考慮的是文字的位置，一般在設定時，使用定位更方便一點，所以才會自動新增），
      // 可以通過設定下面這個屬性為false，禁止自動給容器新增。
      autoStyleContainer: false,
    },
    // 下面三個配置項是配合使用的。
    // from指定進度條（根據上面所列配置項指定）開始的樣式，to指定結束的樣式。樣式的變化自動會有過渡效果。
    // 這個demo中，只展示了顏色的變化，可以同時指定多個樣式，比如還可以指定width的漸變等等。
    // step，第一個引數代表的就是管理from和to中樣式的狀態物件，根據state.color應該就很好理解了。
    //   第二個引數，就是例項物件（JavaScript程式碼最頂部生成的那個）
    from: {color: '#FFEA82'},
    to: {color: '#ED6A5A'},
    step: (state, bar) => {
      // 下面的bar.xxx都是在官網中介紹有案例使用的屬性。
      // 設定跟蹤路徑顏色變化，顏色會根據from 和to 的漸變
      bar.path.setAttribute('stroke', state.color);
      // 設定百分比文字可以隨著，跟隨路徑的不斷填充而實時變化。
      // bar.setText(Math.round(bar.value() * 100) + ' %');
      // 我為了實現當進度條走到一定距離時，在顯示文字，所以加了一個判斷
      let value = Math.round(bar.value() * 100);
      if (value <= 5) {
        bar.setText('');
      } else {
        bar.setText(value+'%');
      }
      // 下面這個設定，主要是想實現文字的位置隨著進度條的增長，跟著變化。
      bar.text.style.left = Math.round(bar.value() * 100) + '%';
     
    }
  });

  // animate方法，用來啟動進度條動畫。
  // 第一個引數 0.0 ~ 1.0 指定動畫結束的百分比，一般都為1，進度條就會跑完整個矩形。
  // 第二個引數，配置項（這裡沒有寫，感覺有點多餘），如果配置的話，會重寫上面的配置項，
  //   比如{duration: 4000} 會重寫上面的duration。
  // 第三個引數，回撥函式，在動畫執行完成之後執行，也就是進度條走完。這裡放一些處理邏輯。
  bar.animate(1, function () {
    console.log('動畫結束，萌萌噠')
  });
</script>
複製程式碼

以上就是長條形的實現。程式碼親測可行。

2.2 圓形

很實用的進度條外掛ProgressBar.js

  • html程式碼，就一個div作為容器
<div id="container"></div>
複製程式碼
  • css程式碼，設定margin是為了進度條的開始部分不在頁面邊緣，為了顯示效果更好。設定position為相對定位，是因為顯示進度條的百分比提示文字，預設會絕對定位！
#container {
  margin: 20px;
  width: 100px;
  height: 100px;
  position: relative;
}
複製程式碼
  • JavaScript程式碼，各個配置引數，會在註釋中，詳細說明。這是官方配置引數的文件
<script src="https://cdn.bootcss.com/progressbar.js/1.0.1/progressbar.js"></script>
<script>
  let container = document.querySelector('#container')

  var bar = new ProgressBar.Circle(container, {
    color: 'salmon',
    strokeWidth: 50,  // 正好是從圓心開始畫起，>50會越過圓心，<50畫出的是圓環
    trailWidth: 50,  // 也設定為50，就是一個未填充的圓形，而不是圓環。要麼設定為0
    easing: 'easeInOut',
    duration: 5000,
    text: {
      style: {
        color: 'yellow',
        display: 'inline-block',
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%,-50%)'
      },
      autoStyleContainer: false
    },
    // fill: 'salmon',   // 圓形內容區域填充色，當需要畫圓環時，效果應該最好。
    from: { color: '#aaa'},
    to: { color: '#333'},
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      
      var value = Math.round(circle.value() * 100);
      circle.setText(value+'%');
    }
  });
  bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  bar.text.style.fontSize = '2rem';

  bar.animate(1.0, function () {
    console.log('動畫執行結束')
  });

</script>
複製程式碼
  • 這個是width的漸變效果

很實用的進度條外掛ProgressBar.js

strokeWidth: 5,
trailWidth: 0,
fill: 'salmon',   // 圓形內容區域填充色
from: { color: '#aaa', width: 1},
to: { color: '#333', width: 5},
circle.path.setAttribute('stroke-width', state.width);  
複製程式碼

相關文章