阅读 5460
手把手教你实现前端组件环形进度条

手把手教你实现前端组件环形进度条

前言

在实际开发中,环形进度条是很常用的一个组件,特别是在管理后台数据统计的页面上或是一些需要用户等待的任务。但很多时候我们都是使用现成的组件来实现,但从未自己手写实现过。

其实环形进度条实现起来也不是很难,接下来我将带你一步一步实现它!

如果你对SVG不是很理解,可以先看下我专栏中的SVG系列教程:点击跳转SVG系列教程

实现效果

6.gif

原理

利用stroke-dasharraystroke-dashoffset属性,将描边的显示进行一个偏移错位。将stroke-dasharrary设定为圆的周长。也即是每段实线距离为圆的一圈。之后再利用stroke-dashoffset属性进行线条的偏移来实现进度条效果。

principle.png

如果你对以上这两个属性不是很明白,可以阅读前端必知必会 | 学SVG看这篇就够了(十三),这对你后续编写SVG动画很有帮助!

用码实现

码出基本样式

先一个创建SVG画布,绘制一个简单的圆形。作为环形进度条的基础。

<svg>
    <circle cx="80" cy="80" r="50" fill="none" stroke-width="8" stroke="#7C83FD"></circle>
</svg>
复制代码

2.png

我们给circle绑定一个类,设置stroke-dasharraystroke-dashoffset为圆的总长度,同时我们也把circle标签内的一些属性放在类中。让circle标签看起来不会很复杂。

<circle class="circle" cx="80" cy="80" r="50" fill="none" stroke-width="8"></circle>
复制代码
.circle {
    fill: none;
    stroke: #7C83FD;
    stroke-width: 8;
    stroke-dasharray: 314;
    stroke-dashoffset:314;
}
复制代码
添加动画效果

创建一个帧动画函数circle,将stroke-dashoffset设置为0,并在circle类绑定它。

.circle {
    fill: none;
    stroke: #7C83FD;
    stroke-width: 8;
    stroke-dasharray: 314;
    stroke-dashoffset:314;
    animation: circle 3s infinite;
}
@keyframes circle {
    100%{
        stroke-dashoffset:0;
    }
}
复制代码

3.gif

到了这里,我们环型进度条效果可以说是完成了一半啦!

我们再优化下,添加stroke-linecap: round;让切口的变为圆形状,这样子让切口看起来更舒服一些。

把圆的开口调整到12点钟方向(正上方),在circle标签中加入transform="rotate(-90 80 80)“

如果你将这行代码添加到CSS中是无效的。如果你想在CSS中调整,你需要使用transform-origintransform-box来调整图形的旋转中心点。

transform:rotate(-90deg);
transform-origin: center;
transform-box:fill-box;
复制代码

4.gif

加入text标签,在圆的中心显示环形进度条的百分比效果。给数字标签绑定一个text类,用于后续控制显示环形进度条数值。

<svg>
    <circle class="circle" cx="80" cy="80" r="50" transform="rotate(-90 80 80)"></circle>
    <text x="80" y="85" fill="#6b778c" text-anchor="middle">
        <tspan class="text">0</tspan><tspan class="percent">%</tspan>
    </text>
</svg>
复制代码
.text{
    font-size: 20px;
}
.percent{
    font-size: 10px;
}
复制代码

5.png

码出交互

移除circle帧动画函数,在这里我们不需要使用CSS来控制它了,加入JavaScript代码,让我们可以自主的控制环形进度条里边的进度。

首先,定义一个圆周长的变量并将它赋值为314,这用于我们后续进度的计算,获取SVG画布中的circle图形和text中的数字标签。

let progressLen=314;
const textDom=document.getElementsByClassName('text')[0];
const circleDom=document.getElementsByClassName('circle')[0];
复制代码

定义一个setPercent函数,用于设定这个环形进度条的百分比。

setPercent=(num)=>{
    if(num>100) return;
    circleDom.style['stroke-dashoffset']=progressLen-(progressLen/100)*num;
    textDom.innerHTML=num;
}
复制代码

实现加载页面后,让环形从0加载到100%,在script标签内代码末行加入以下代码即可,意思是每150毫秒更新环形进度条的进度,进度百分比=当前进度数值+随机数值。

let i=0;
setInterval(()=>{
    i+=Math.floor(Math.random()*5);
    if(i>=100)i=100;
    setPercent(i);
},250)
复制代码

circle类中加入transition: all 1s;,让stroke-dashoffset属性在更新数值时有个过渡效果,让整个过程不会很生硬。

6.gif

最后

本文带着大家从零实现到一个环形进度条,使用SVG进行开发实现。我们还可以将这个环形动画引入到按钮中,或是悬浮球中作为显示,结合其他组件获得更好获得交互体验。希望大家能从中有所收获,写出更好更炫酷的动画效果。

😉 如果你觉得本文对你有所帮助 请留个赞 😉

相关好文推荐

前端button组件之按钮式进度条

前端button组件之涟漪效果

文章分类
前端
文章标签