vue圆形进度条组件解析

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;
}
这波组件较为简单，貌似没什么可说的了，就这样吧。