vue 圆形进度条组件解析

Cheng_Gang 发布于2019-08-23 12:14 / 3100人阅读

摘要：项目简介本组件是下的圆形进度条动画组件自由可定制，几乎全部参数均可设置源码简单清晰面向人群急于使用圆形进度条动画组件的同学。由于动画关键帧的定义需要根据外部传入的参数决定，不能预先写死。所以通过生成节点的方式插入关键帧。

项目简介

本组件是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;
  }

项目源码及示例

这波组件较为简单，貌似没什么可说的了，就这样吧

GPU云服务器云服务器 html的圆形进度条 progressbar圆形进度进度条 vue组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98158.html

鸿蒙开源第三方组件——SwipeCaptcha_ohos3.0旋转验证组件

摘要：步骤设置控件监听事件，重新生成验证区域在文件中添加控件在文件中添加控件，用于显示旋转验证的动态效果。先实例化一个随机数对象，用于后续计算随机生成的旋转验证块角度值。前言基于安卓平台的滑动拼## 二级标题图验证组件SwipeCaptcha（https://github.com/mcxtzhang/SwipeCa...

Amos 2021-11-23 09:51 评论0 收藏0
Vue2.0 仿滴滴出行项目

摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。效果预览 showImg(h...

ShevaKuilin 2019-08-21 11:44 评论0 收藏0
React Native 圆形进度条组件

摘要：演示动画安装方法需要手动下，用打开项目，添加到中，然后在中添加。暂时没找到原因。完整示例完整代码圆形进度条组件本次示例代码在文件夹中。组件地址微信不让跳转外链，可以点击查看原文来查看外链内容。本文原创首发于公众号：ReactNative开发圈，转载需注明出处。 React Native 圆形进度条组件：react-native-circular-progress，圆形的进度条组件，支...

XiNGRZ 2019-08-21 18:37 评论0 收藏0
Vue 实现的音乐项目 music app 知识点总结分享

摘要：后两个属性可选。属性定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小。属性定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为，即项目的本来大小。结合的异步组件和的代码分割功能，轻松实现路由组件的懒加载。项目总结这是我第二个用 Vue 实现的项目，下面内容包括了在实现过程中所记录的知识点以及一些小技巧项目演示地址：https://music-vue.n-y.io源...

meteor199 2019-08-26 11:45 评论0 收藏0