最新消息:flex弹性布局更新完毕,阅读地址:http://www.01happy.com/css-flex/

svg实现环形进度条动画

css 36浏览 0评论

尝试用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环形进度条 即可获取。

1

转载请注明:快乐编程 » svg实现环形进度条动画

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址