資訊專欄INFORMATION COLUMN
摘要：項(xiàng)目簡介本組件是下的圓形進(jìn)度條動(dòng)畫組件自由可定制，幾乎全部參數(shù)均可設(shè)置源碼簡單清晰面向人群急于使用圓形進(jìn)度條動(dòng)畫組件的同學(xué)。由于動(dòng)畫關(guān)鍵幀的定義需要根據(jù)外部傳入的參數(shù)決定，不能預(yù)先寫死。所以通過生成節(jié)點(diǎn)的方式插入關(guān)鍵幀。
項(xiàng)目簡介
本組件是vue下的圓形進(jìn)度條動(dòng)畫組件
自由可定制，幾乎全部參數(shù)均可設(shè)置
源碼簡單清晰
面向人群急于使用vue圓形進(jìn)度條動(dòng)畫組件的同學(xué)。直接下載文件，拷貝代碼即可運(yùn)行。
喜歡看源碼，希望了解組件背后原理的同學(xué)。
剛接觸前端的同學(xué)也可以通過本文章養(yǎng)成看源碼的習(xí)慣。打破對(duì)源碼的恐懼，相信自己，其實(shí)看源碼并沒有想象中的那么困難
| 參數(shù)名 | 值類型 | 是否必填 | 參數(shù)作用 | 默認(rèn)值 |
| :------: | :------: | :------: | :------: | :------: |
| id | String | 選填 | 組件的id，多次定義設(shè)置不同的值 | 1 |
| width | Number | 必填 | 設(shè)置圓整體的大小，單位為px | 無 |
| radius | Number | 必填 | 設(shè)置進(jìn)度條寬度，單位為px | 無 |
| progress | Number | 必填 | 設(shè)置進(jìn)度百分比 | 無 |
| barColor | String | 必填 | 設(shè)置進(jìn)度條顏色 | 無 |
| backgroundColor | String | 必填 | 設(shè)置進(jìn)度條背景顏色 | 無 |
| delay | Number | 選填 | 延遲多久執(zhí)行，單位為ms | 20 |
| duration | Number | 選填 | 動(dòng)畫整體時(shí)長，單位為ms | 1000 |
| timeFunction | String | 選填 | 動(dòng)畫緩動(dòng)算法 | cubic-bezier(0.99, 0.01, 0.22, 0.94) |
| isAnimation | Boolean | 選填 | 是否以動(dòng)畫的方式呈現(xiàn) | true |
使用的是svg技術(shù)進(jìn)行繪畫
原理很簡單，就是兩個(gè)圓的折疊顯示，這里重點(diǎn)講的是svg標(biāo)簽各屬性的意義
r：圓的半徑
cy：圓點(diǎn)的 y 坐標(biāo)
cx：圓點(diǎn)的 x 坐標(biāo)
stroke：畫筆顏色
stroke-width：畫筆寬度
stroke-linecap：畫筆結(jié)束方式，是圓形結(jié)束還是垂直結(jié)束
stroke-dasharray：需要點(diǎn)數(shù)字，如果只設(shè)置一個(gè)值，則僅生成一條線的虛線，從而實(shí)現(xiàn)畫直線
stroke-dashoffset：定義虛線開始的地方，即虛線的位移。從而隱藏一部分虛線，實(shí)現(xiàn)顯示弧線的效果。動(dòng)畫的原理也是利用該屬性，控制隱藏的部分，實(shí)現(xiàn)進(jìn)度條的增長
fill：填充的圖案或者顏色，由于這里直接使用畫筆描繪圖形，所以用不上，為了覆蓋其默認(rèn)值black，設(shè)置為none
css3的animation動(dòng)畫。
由于動(dòng)畫關(guān)鍵幀「keyframes」的定義需要根據(jù)外部傳入的參數(shù)決定，不能預(yù)先寫死。
所以通過生成style節(jié)點(diǎn)的方式插入關(guān)鍵幀。
在組件beforeDestroy時(shí)，將生成的style節(jié)點(diǎn)刪除掉。方式是通過給style節(jié)點(diǎn)添加id屬性進(jìn)行定位。
動(dòng)畫是通過修改stroke-dashoffset的值實(shí)現(xiàn)，設(shè)置不同的stroke-dashoffset值，可以控制圓弧隱藏的內(nèi)容
完全隱藏時(shí)，stroke-dashoffset值即圓形進(jìn)度條的周長
stroke-dashoffset除了在節(jié)點(diǎn)屬性中設(shè)置，也可以通過css樣式設(shè)置
@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;
}
項(xiàng)目源碼及示例
這波組件較為簡單，貌似沒什么可說的了，就這樣吧
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98158.html
摘要：步驟設(shè)置控件監(jiān)聽事件，重新生成驗(yàn)證區(qū)域在文件中添加控件在文件中添加控件，用于顯示旋轉(zhuǎn)驗(yàn)證的動(dòng)態(tài)效果。先實(shí)例化一個(gè)隨機(jī)數(shù)對(duì)象，用于后續(xù)計(jì)算隨機(jī)生成的旋轉(zhuǎn)驗(yàn)證塊角度值。 前言基于安卓平臺(tái)的滑動(dòng)拼## 二級(jí)標(biāo)題圖驗(yàn)證組件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...
摘要：仿滴滴出行項(xiàng)目最近，各大社區(qū)出現(xiàn)很多小伙伴的項(xiàng)目，趁著這股熱潮我也用擼了一個(gè)滴滴出行的項(xiàng)目。可是，后來在手機(jī)上發(fā)現(xiàn)，輸入的時(shí)候居然調(diào)不出軟鍵盤，寫項(xiàng)目的時(shí)候沒考慮到設(shè)備問題，簡直是大大的失誤。也就是說可以在組件內(nèi)部進(jìn)行請(qǐng)求，不需要提交。 Vue2.0 仿滴滴出行項(xiàng)目 最近，各大社區(qū)出現(xiàn)很多小伙伴的vue項(xiàng)目，趁著這股熱潮我也用vue擼了一個(gè)滴滴出行的項(xiàng)目。 效果預(yù)覽 showImg(h...
摘要：演示動(dòng)畫安裝方法需要手動(dòng)下，用打開項(xiàng)目，添加到中，然后在中添加。暫時(shí)沒找到原因。完整示例完整代碼圓形進(jìn)度條組件本次示例代碼在文件夾中。組件地址微信不讓跳轉(zhuǎn)外鏈，可以點(diǎn)擊查看原文來查看外鏈內(nèi)容。 本文原創(chuàng)首發(fā)于公眾號(hào)：ReactNative開發(fā)圈，轉(zhuǎn)載需注明出處。 React Native 圓形進(jìn)度條組件：react-native-circular-progress，圓形的進(jìn)度條組件，支...
摘要：后兩個(gè)屬性可選。屬性定義了項(xiàng)目的縮小比例，默認(rèn)為，即如果空間不足，該項(xiàng)目將縮小。屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。它的默認(rèn)值為，即項(xiàng)目的本來大小。結(jié)合的異步組件和的代碼分割功能，輕松實(shí)現(xiàn)路由組件的懶加載。 項(xiàng)目總結(jié) 這是我第二個(gè)用 Vue 實(shí)現(xiàn)的項(xiàng)目，下面內(nèi)容包括了在實(shí)現(xiàn)過程中所記錄的知識(shí)點(diǎn)以及一些小技巧 項(xiàng)目演示地址：https://music-vue.n-y.io源...
閱讀 948·2021-11-22 12:09
閱讀 3715·2021-09-27 13:36
閱讀 1403·2021-08-20 09:37
閱讀 4027·2019-12-27 12:22
閱讀 2365·2019-08-30 15:55
閱讀 2370·2019-08-30 13:16
閱讀 2832·2019-08-26 17:06
閱讀 3442·2019-08-23 18:32
