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

Posted 2021-12-12 songbw

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

---

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

svg的viewBox

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

在demo中为了方便计算svg元素的中心，我设置为（0, 0) 即圆的坐标方程满足 x^2 + y^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 } = this
      return this.getD(ratio)
    }
  },
  methods: {
    getD(ratio) {
      if (ratio >= 100) {
        ratio  = 99.999
      }
      const angle = Math.PI / 50 * ratio
      const r = this.r
      const 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：第一次写博客，发现表达能力真的好差；