五分钟学会各种环形进度条

4,185 阅读4分钟

本文将会通过svg实现圆形进度条矩形进度条以及三角形进度条,先放效果图 progress.gif

圆环进度条

首先我们需要两个画两个圆,一个是底色圆,一个是进度圆。

<svg width="200" height="200">
  <circle fill="none" cx="100" cy="100" r="50" stroke="#EBEDF0" stroke-width="10" />
  <path fill="none" d="M 100, 50 A 50, 50, 0, 0, 1, 100, 150 A 50, 50, 0, 0, 1, 100, 50" stroke="#50D4AB" stroke-width="10" />
</svg>

现在就画好了两个圆,绘制进度圆的重点就是d属性值M代表起点,A代表画椭圆弧,一次最多只能画半圆,所以要分两次,下面是具体画圆路径的参数解释

命令参数-参数解释
Arx, ry x-axis-rotation, large-arc-flag, sweepflag x, y从当前画笔位置开始绘制一条椭圆弧线到(x,y)指定的坐标。rx和ry分别为X轴和Y轴的半径。x-axis-rotation为x轴旋转度数。large-arc-flag代表优弧还是劣弧(0表示劣弧,1表示优弧)。sweep-flag为弧线方向 0为顺时针 1为逆时针
Mx,y移动虚拟画笔到指定的(x,y)坐标,仅移动不绘制

既然圆画出来了,怎么让进度圆动起来?

这个时候就有比较重要的两个属性 stroke-dasharraystroke-dashoffset 关于这两个属性详细解释可以看这个大佬写的链接

stroke-dasharray

stroke-dasharray属性用于创建虚线,就是设置实线和虚线的宽度

比如:stroke-dasharray: 50 20; 效果就是下图

image.png


stroke-dasharray 当属性为两个值时,一个表示长度,一个表示间距

这个时候我们可以利用这个属性来实现进度,首先我们需要知道这个圆的周长,然后就可以通过百分比 * 周长去得到相应百分比需要绘制的长度。

周长 = 2* Π * r 这个公式大家都会吧,以示例为准,周长 = 2 * Math.PI * 50,我们将其进度变为25%

const girth = 2 * Math.PI * 50
const dasharray = `${0.25 * girth} ${girth}`
const d = M 100, 50 A 50, 50, 0, 0, 1, 100, 150 A 50, 50, 0, 0, 1, 100, 50

<svg width="200" height="200">
 <circle fill="none" cx="100" cy="100" r="50" stroke="#EBEDF0" stroke-width="10" />
 <path fill="none" :d="d" stroke="#50D4AB" stroke-width="10" :stroke-dasharray="dasharray"/>
</svg>

image.png

这样就实现了一个进度为25%的圆环进度条

矩形进度条

老规矩,先画两个矩形,rx代表矩形的圆角,矩形进度条的重点是在周长的计算,以示例为准,因为矩形是带圆角的,所以就不是 2 * (长 + 宽) ,而是需要加上圆角的长度

<svg width="200" height="200">
  <rect fill="none" x="10" y="10" rx="10" width="100" height="100" stroke="#ebedf0" stroke-width="10" />
  <rect fill="none" x="10" y="10" rx="10" width="100" height="100" stroke="#50D4AB" stroke-width="10" />
</svg>

image.png

矩形的四个圆角拼起来其实就是一个圆,半径就是 rx
可以得出周长 = 2 * Math.PI * rx + 4 * (正方形的边长 - 2 * rx)

接下来还是用dasharray属性来实现进度

const circleGirth = 2 * Math.PI * 100 // 圆角的圆的周长
const width = 100 - 2 * 10 // 正方形的边长
const girth = circleGirth + 4 * width // 圆角矩形总周长
const dasharray = `${0.25 * girth} ${girth}`

  <svg width="200" height="200">
      <rect fill="none" x="10" y="10" rx="10" width="100" height="100" stroke="#ebedf0" stroke-width="10" />
      <rect fill="none" x="10" y="10" rx="10" width="100" height="100" stroke="#50D4AB" stroke-width="10"  :stroke-dasharray="dasharray"/>
  </svg>

image.png

圆环进度条会了,矩形不是信手拈来

三角形进度条

三角形进度条是用 polygon 来实现,其中 stroke-linejoin 属性是可以设置圆角,在计算周长的时候就不需要计算圆角,会比较方便,points属性就是三角形三个角的坐标,所以绘制的重点是这三个角的坐标

<svg>
<polygon fill="none" stroke-linejoin="round" points="ax,ay bx,by cx,cy" stroke="#ebedf0" stroke-width="10"/>
</svg>

接下来我们来计算ABC三个角的坐标

image.png

以边长100为例,先求三角形的高,因为等边三角形三线合一,高既是底边的中线,也是底边的高线,再根据勾股定理 得出 高² = 边长² - 底边²高 = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2))所以 A点的坐标(0, 高),B点的坐标(50, 0),C点的坐标(100, 高)

const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高
const points = `0,${height} 50,0 100,${height}`

<svg>
  <polygon fill="none" stroke-linejoin="round" :points="points" stroke="#50D4AB" stroke-width="10"/>
</svg>

image.png

当我们将相应的值带进去的时候,发现有部分被遮挡,其实是因为我们设置了 stroke-width,所以我们只需要将ABC三点的xy坐标都加10就行了

const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高
const points = `10,${height + 10} 60,10 110,${height + 10}`

<svg>
  <polygon fill="none" stroke-linejoin="round" :points="points" stroke="#50D4AB" stroke-width="10"/>
</svg>

三角形实现了,现在只需要计算周长,就可以实现进度百分比,周长 = 3 * 边长,现在以33%为例实现代码

const height = Math.sqrt(Math.pow(100, 2) - Math.pow(50, 2)) // 高
const points = `10,${height + 10} 60,10 110,${height + 10}`
const dasharray = 100 300
<svg>
  <polygon fill="none" stroke-linejoin="round" :points="points" stroke="#ebedf0" stroke-width="10"/>
  <polygon fill="none" stroke-linejoin="round" :points="points" stroke="#50D4AB" stroke-width="10"  :stroke-dasharray="dasharray" stroke-linecap="round" />
</svg>

image.png

其中的stroke-linecap属性是设置进度条的进度圆角

这样我们就简单的实现了三种不一样的进度条