項目簡介
- 本元件是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;
}
項目源碼及示例
這波元件較為簡單，貌似沒什麼可說的了，就這樣吧
來源：https://segmentfault.com/a/1190000016591047