項目簡介
- 本組件是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; }
項目源碼及示例
這波組件較為簡單，貌似沒什么可說的了，就這樣吧