vue 圓形進度條組件解析

項目簡介

• 本組件是vue下的圓形進度條動畫組件
• 自由可定製，幾乎所有參數都可設置
• 源碼簡單清晰

面向人羣

• 急於使用vue圓形進度條動畫組件的同窗。直接下載文件，拷貝代碼便可運行。
• 喜歡看源碼，但願瞭解組件背後原理的同窗。
  剛接觸前端的同窗也能夠經過本文章養成看源碼的習慣。打破對源碼的恐懼，相信本身，其實看源碼並無想象中的那麼困難

組件使用方法及參數解析

<circle-progress
   :id="1"
   :width="200"
   :radius="20"
   :progress="70"
   :delay="200"
   :duration="1000"
   :barColor="#F2AE57"
   :backgroundColor="#FFE8CC"
   :isAnimation="true"
   :timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"
 >

| 參數名 | 值類型 | 是否必填 | 參數做用 | 默認值 |
| :------: | :------: | :------: | :------: | :------: |
| id | String | 選填 | 組件的id，屢次定義設置不一樣的值 | 1 |
| width | Number | 必填 | 設置圓總體的大小，單位爲px | 無 |
| radius | Number | 必填 | 設置進度條寬度，單位爲px | 無 |
| progress | Number | 必填 | 設置進度百分比 | 無 |
| barColor | String | 必填 | 設置進度條顏色 | 無 |
| backgroundColor | String | 必填 | 設置進度條背景顏色 | 無 |
| delay | Number | 選填 | 延遲多久執行，單位爲ms | 20 |
| duration | Number | 選填 | 動畫總體時長，單位爲ms | 1000 |
| timeFunction | String | 選填 | 動畫緩動算法 | cubic-bezier(0.99, 0.01, 0.22, 0.94) |
| isAnimation | Boolean | 選填 | 是否以動畫的方式呈現 | true |

原理解析

圓形的繪畫

• 使用的是svg技術進行繪畫
• 原理很簡單，就是兩個圓的摺疊顯示，這裏重點講的是svg標籤各屬性的意義
• r：圓的半徑
• cy：圓點的 y 座標
• cx：圓點的 x 座標
• stroke：畫筆顏色
• stroke-width：畫筆寬度
• stroke-linecap：畫筆結束方式，是圓形結束仍是垂直結束
• stroke-dasharray：須要點數字，若是隻設置一個值，則僅生成一條線的虛線，從而實現畫直線
• stroke-dashoffset：定義虛線開始的地方，即虛線的位移。從而隱藏一部分虛線，實現顯示弧線的效果。動畫的原理也是利用該屬性，控制隱藏的部分，實現進度條的增加

• fill：填充的圖案或者顏色，因爲這裏直接使用畫筆描繪圖形，因此用不上，爲了覆蓋其默認值black，設置爲none

  <circle ref="$bar"
    :r="(width-radius)/2"
    :cy="width/2"
    :cx="width/2"
    :stroke="barColor"
    :stroke-width="radius"
    :stroke-linecap="isRound ? 'round' : 'square'"
    :stroke-dasharray="(width-radius)*3.14"
    :stroke-dashoffset="isAnimation ? (width-radius) * 3.14 : (width - radius) * 3.14 * (100 - progress) / 100"
    fill="none"
  />

動畫原理

• css3的animation動畫。
• 因爲動畫關鍵幀「keyframes」的定義須要根據外部傳入的參數決定，不能預先寫死。
• 因此經過生成style節點的方式插入關鍵幀。
• 在組件beforeDestroy時，將生成的style節點刪除掉。方式是經過給style節點添加id屬性進行定位。
• 動畫是經過修改stroke-dashoffset的值實現，設置不一樣的stroke-dashoffset值，能夠控制圓弧隱藏的內容
• 徹底隱藏時，stroke-dashoffset值即圓形進度條的周長

• stroke-dashoffset除了在節點屬性中設置，也能夠經過css樣式設置

  @keyframes circle_progress_keyframes_name_1 {
      from {
        stroke-dashoffset: 565.2px;
      }
      to {
        stroke-dashoffset: 169.56px;
      }
    }
    .circle_progress_bar1 {
      animation: circle_progress_keyframes_name_1 1000ms 20ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards;
    }

項目源碼及示例

這波組件較爲簡單，貌似沒什麼可說的了，就這樣吧