資訊專欄INFORMATION COLUMN
摘要：項目簡介本組件是下的圓形進度條動畫組件自由可定制，幾乎全部參數均可設置源碼簡單清晰面向人群急于使用圓形進度條動畫組件的同學。由于動畫關鍵幀的定義需要根據外部傳入的參數決定，不能預先寫死。所以通過生成節點的方式插入關鍵幀。
項目簡介
本組件是vue下的圓形進度條動畫組件
自由可定制，幾乎全部參數均可設置
源碼簡單清晰
面向人群急于使用vue圓形進度條動畫組件的同學。直接下載文件，拷貝代碼即可運行。
喜歡看源碼，希望了解組件背后原理的同學。
剛接觸前端的同學也可以通過本文章養成看源碼的習慣。打破對源碼的恐懼，相信自己，其實看源碼并沒有想象中的那么困難
| 參數名 | 值類型 | 是否必填 | 參數作用 | 默認值 |
| :------: | :------: | :------: | :------: | :------: |
| 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
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;
}
項目源碼及示例
這波組件較為簡單，貌似沒什么可說的了，就這樣吧
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98158.html
摘要：步驟設置控件監聽事件，重新生成驗證區域在文件中添加控件在文件中添加控件，用于顯示旋轉驗證的動態效果。先實例化一個隨機數對象，用于后續計算隨機生成的旋轉驗證塊角度值。 前言基于安卓平臺的滑動拼## 二級標題圖驗證組件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...
摘要：仿滴滴出行項目最近，各大社區出現很多小伙伴的項目，趁著這股熱潮我也用擼了一個滴滴出行的項目。可是，后來在手機上發現，輸入的時候居然調不出軟鍵盤，寫項目的時候沒考慮到設備問題，簡直是大大的失誤。也就是說可以在組件內部進行請求，不需要提交。 Vue2.0 仿滴滴出行項目 最近，各大社區出現很多小伙伴的vue項目，趁著這股熱潮我也用vue擼了一個滴滴出行的項目。 效果預覽 showImg(h...
摘要：演示動畫安裝方法需要手動下，用打開項目，添加到中，然后在中添加。暫時沒找到原因。完整示例完整代碼圓形進度條組件本次示例代碼在文件夾中。組件地址微信不讓跳轉外鏈，可以點擊查看原文來查看外鏈內容。 本文原創首發于公眾號：ReactNative開發圈，轉載需注明出處。 React Native 圓形進度條組件：react-native-circular-progress，圓形的進度條組件，支...
摘要：后兩個屬性可選。屬性定義了項目的縮小比例，默認為，即如果空間不足，該項目將縮小。屬性定義了在分配多余空間之前，項目占據的主軸空間。它的默認值為，即項目的本來大小。結合的異步組件和的代碼分割功能，輕松實現路由組件的懶加載。 項目總結 這是我第二個用 Vue 實現的項目，下面內容包括了在實現過程中所記錄的知識點以及一些小技巧 項目演示地址：https://music-vue.n-y.io源...
閱讀 929·2021-11-22 12:09
閱讀 3704·2021-09-27 13:36
閱讀 1390·2021-08-20 09:37
閱讀 4007·2019-12-27 12:22
閱讀 2353·2019-08-30 15:55
閱讀 2358·2019-08-30 13:16
閱讀 2817·2019-08-26 17:06
閱讀 3433·2019-08-23 18:32
