svg实现环形进度条动画

尝试用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实现环形进度条动画