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;
}
这波组件较为简单,貌似没什么可说的了,就这样吧
vue 圆形百分比进度条_vue 圆形进度条组件解析相关推荐
- vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
- vue中的横向排列_vue横向步骤条
v-bind:class="[stepArray.length==2 ? 'width-2' : stepArray.length==3?'width-3':'width-4', '']&q ...
- 在vue中实现picker样式_vue vant中picker组件的使用
1.引入 import { Picker } from "vant" 2.使用 components: { vanPicker: Picker, } 3.渲染 show-toolb ...
- vue 事件调用 传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件?...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
- vue修改代码同步页面_vue实现两个组件之间数据共享和修改操作
我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了 ...
- 圆形百分比进度条效果
一.前言 最近有点懈怠啊,没怎么整理发布博客.今天写篇文章和大家分享一个常用的效果,圆形百分比进度条.前段时间我有个页面需要该效果,就在网上看了下,实现方式有好几种,我找了一种比较好实现的给大家一步步 ...
- android 圆形渐变背景,android实现圆形渐变进度条
最近项目中使用到了渐变效果的圆形进度条,网上找了很多渐变效果不够圆滑,两个渐变颜色之间有明显的过渡,或者有些代码画出来的效果过渡不美观,于是自己参照写了一个,喜欢的朋友可以参考或者直接使用. 先上一张 ...
- Android可触摸圆形进度条,Android 可滚动圆形进度条 滑块和进度在进度条上面跟着滚动...
Android 可滚动圆形进度条 滑块和进度在进度条上面跟着滚动.package com.example.test; import android.content.Context; import an ...
- android欢迎页圆形倒计时,android 欢迎页圆形进度条倒计时功能
常见app欢迎页圆形进度条倒计时功能,可设置显示文字,进度条颜色,宽度,倒计时时间,内圆颜色.设置进度条类型 顺数进度条(0-100)还是倒数进度条(100-0): 先上效果图: 下面介绍实现逻辑: ...
- android自定义带进度条的圆形图片
前言:在项目听新闻的改版中需要实现环绕圆形新闻图片的进度条功能,作为技术预备工作我就去看了一些网上的相关的原理,做了一个自定义带进度条的圆形图片的demo,并将这个实现写成文章发布出来,谁需要了可以进 ...
最新文章
- 设计模式模式游客(Visitor)摘录
- Install Mysql with SELinux on
- 自定义控件:流式布局
- BugKuCTF WEB web4
- PCB设计中焊盘的种类,你都见过几种?
- Jquery创建动态表单
- 【BZOJ1048】分割矩阵(记忆化搜索,动态规划)
- 怀化学院计算机科学专业排名,2019怀化学院专业排名
- c语言源程序自动评判系统,C语言源程序的自动评判毕业设计论文
- 【C++笔记】函数的用法:函数的默认参数、占位参数、函数重载
- php 入库乱码,解决php 中文字符入库或显示乱码的简单示例
- python装饰器两层和三层_python装饰器为什么要双层嵌套函数
- 秋天的第一杯奶茶,没喝到?那这个你绝对不能再错过
- HTML免费在线文档批量翻译工具
- 你需要这样一个Ros软路由—— 路由器+外网+一号通ip线路=动态ip的WiFi信号
- 【电路设计】TTLCMOS芯片型号总结
- python日本 老龄化分析_中国离老龄化社会还有多远?数据图表源代码一览
- tf.expand_dims
- go语言的ini文件配置读取
- 计算机桌面上的照片转pdf免费,如何把图片转化为pdf,图片转换pdf工具推荐
热门文章
- 微软采纳我的建议在WES7增加媒体中心组件
- 怎么获取echarts需要的geoJson数据去渲染地图:以广州市白云区24镇街为例(内附资源)
- iOS 视频播放器 VLC的集成和基本使用
- 大数据、智慧城市与智慧交通 (全集)
- html上下表格合并单元格,html表格合并单元格的方法_WEB前端开发
- Jquery API帮助文档 chm
- 【macOS付费软件推荐】第6期:Reeder
- Anaconda如何安装PyTorch?
- 利用腾讯云独立IP使用windows用CCProxy搭建Socks5多IP代理服务器图文教程实现单窗口单IP
- 如何mysql学籍管理系统_MySQL基础-学生管理系统数据库设计