如何用SVG写一个环形进度条以及动画

本次案例主要使用了svg的三个元素,分别为circle、text、path,关于svg的介绍大家可以看MDN上的相关教程,传送门由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动画啦,这次案例以vue来做数据交互svg的viewBoxviewBox属性定义了画布上可以显示的区域,viewBox有4个值,值1为svg窗口起点显示的x坐标,值2位svg窗口起点的y坐标,后面的两个分...

如何用SVG写一个环形进度条以及动画

本次案例主要使用了svg的三个元素,分别为circletextpath,关于svg的介绍大家可以看MDN上的相关教程,传送门


由于svg可以写到HTML中,所以这里我们就可以很方便的做进度条加载动画啦,这次案例以vue来做数据交互

svg的viewBox

viewBox属性定义了画布上可以显示的区域,viewBox有4个值,值1为svg窗口起点显示的x坐标,值2位svg窗口起点的y坐标, 后面的两个分别为显示的大小; 平常可以通过后面这两个值对svg图形进行放大和缩小, 前面的两个值进行窗口位置的变换

在demo中为了方便计算svg元素的中心,我设置为(0, 0) 即圆的坐标方程满足 x^2y^2 = r^2

circle元素

circle元素在svg中可以画一个圆,主要属性为cx(圆心x坐标)、cy(圆心y左边)、r(圆的半径)

text元素

svg中显示字体的元素,text-anchor、dominant-baseline分别可以设置字体的左右、上线对齐方式

path元素

svg中所有的基本元素都可以通过path路径画出来,该元素只有一个属性d,动画的效果就是通过不断改变d的值来达到的;
在这里只需要掌握d的A命令即可,传送门


效果图以及代码

<div id=“app“> <svg width=“100“ height=“100“ viewBox=“-50 -50 100 100“>  <circle cx=“0“ cy=“0“ stroke-width=“6“ fill=“none“ stroke=“#ddd“ :r=“r“/>  <path :d=“d“ fill=“none“ stroke-width=“6“ stroke=“#369“/>  <text text-anchor=“middle“ dominant-baseline=“middle“>{{ ratio }}%</text> </svg></div>
new Vue({  el: '#app',  data: { ratio: 1, r: 47  },  computed: { d() {const { ratio } = thisreturn this.getD(ratio) }  },  methods: { getD(ratio) {if (ratio >= 100) {  ratio  = 99.999}const angle = Math.PI / 50 * ratioconst r = this.rconst x = r * Math.cos(angle)const y = -r * Math.sin(angle)const isBigAngle = Number(ratio > 50)return `M 47 0 A 47 47 0 ${isBigAngle} 0 ${x} ${y}` }  },  mounted() { let timer = setInterval(() => {if (this.ratio > 100) {  this.ratio = 100  clearInterval(timer)  timer = null  return}this.ratio  = 1 }, 16)  }})

ps:第一次写博客,发现表达能力真的好差;

源文地址:https://www.guoxiongfei.cn/cntech/18375.html