尝试用svg写了一个环形进度条的效果,svg的功能确实是越来越强大了。
先看个效果:

svg环形进度条动画
其中关键的步骤如下:
1) svg 画两个圆形
一个用作背景,一个用来做动画效果。
<!-- 背景环形 -->
<circle cx="50%" cy="50%" r="45%" fill="none" stroke="skyblue" stroke-width="10" stroke-linecap="round">
</circle>
<!-- 动画环形 -->
<circle class="circle" cx="50%" cy="50%" r="45%" fill="none" stroke="steelblue" stroke-width="10"
stroke-linecap="round"></circle>
2)使用stroke-dasharray和stroke-dashoffset样式
动画效果的圆形使用 stroke-dasharray 和 stroke-dashoffset 样式来实现动画效果,js通过变更 stroke-dashoffset 的值从而进行实现。
.circle {
/* 进度条的核心,为什么是566呢? */
stroke-dasharray: 566 566;
stroke-dashoffset: 566;
/* 动画起始点旋转到0点处 */
transform: rotate(-90deg);
transform-origin: center;
}
思考:
这边为什么是设置566呢?
解答:
因为这里是表示圆形的周长,2 * pi * 90 = 566。
3)使用js让圆形动起来
let timer = setInterval(function() { // 定时器
start += 1;
// 关键代码是这行
circleElement.style.strokeDashoffset = strokeDashoffset * (100 - start) / 100;
textElement.innerHTML = start + '%';
if (start >= end) {
clearInterval(timer);
}
}, millisec);
获取完整代码请关注公众号,输入:svg环形进度条 即可获取。
转载请注明:快乐编程 » svg实现环形进度条动画