环形进度条

前段时间有个需求就是实现一个动态的环形进度条，作为某业务的入口，这块呢经过一番查阅和思考后最终选择了canvas.

传统方式下，除非使用图片，不然没办法做出这种圆环的动态效果。但进度数据的范围相对而言比较广（整数值状态下为 0%~100% ，约 100 个独立状态），每个状态用图片来做显然是不现实的。可以考虑使用CSS3、Canvas来解决。

下面就来分析下使用以上技术是如何解决环形进度条需求的。

一、背景图

原理

将各个状态下的图片拼成一个sprite，定时更新background-position来显示各个状态下的图片，时间间隔掌握合适就形成了动画。这是最简单粗暴的做法。

优势

  • 基本不用编写复杂的绘图代码，只要写好定时器部分的逻辑即可完成交互。
  • 每个状态都可以用图来表示，展现复杂的进度效果很简单，只需要修改PSD即可。
  • 整体来说，对开发人员的要求较低。

缺点

  • 对状态点的数目很敏感。正常情况下的 100（0%~100%） 个状态需要相同数据的图片。当然也可以减少状态点的数目，但是这么做有可能会影响到后期状态切换时的渐进效果。
  • 后期需要修改状态点展现时，需要重新制作 sprite 。

二、CSS3

CSS3 本身提供很多强大的属性，可以通过使用 border-radius、transform 等属性来完成上面的需求。

原理

先做一个环形的进度条，然后在它上面分别放置左右两个半圆（使用 clip 来显示一个圆的一半区域），最后定时旋转（使用 transform 中的 rotate 来实现）这两个半圆来显示出下面的进度条。连续执行后就形成了渐进的动画。

css属性帮助链接：

border-radius
transform

实现步骤

1）先实现一个静态的圆环形进度条

1
<div class="circle-progress"></div>
1
2
3
4
5
6
.circle-progress{
    width: 160px;
    height: 160px;
    border: 20px solid red;
    border-radius: 50%;
}

效果：

静态环形进度条

2）不是完整圆环

1
2
3
4
5
6
7
8
.circle-progress{
    width: 160px;
    height: 160px;
    border: 20px solid red;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-radius: 50%;
}

静态非完整环形进度条

看上去也不难吧！

3）不刚好都是45度的倍数

一步一步来，首先设置一个200 * 200的方块，再放两个矩形，每个矩形都占一半， 每个矩形内部有个半圆

1
2
3
4
5
6
7
8
<div class="circleProgress-wrapper">
    <div class="wrapper right">
        <div class="circle-progress right-circle"></div>
    </div>
    <div class="wrapper left">
        <div class="circle-progress left-circle"></div>
    </div>
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.circleProgress-wrapper {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
    border: 1px solid #eee;
}
.wrapper {
    overflow: hidden; // 两个矩形都设置了溢出隐藏，当旋转矩形里面的圆的时候，溢出部分就被隐藏掉，以此达到效果
    position: absolute;
    top: 0;
    width: 100px;
    height: 200px;
}
.right {
    right: 0;
}
.left {
    left: 0;
}

效果如下：
rectangle

关键： overflow: hidden;

然后看下右边圆

1
2
3
4
5
6
7
8
9
10
11
12
13
.circle-progress {
    position: absolute;
    top: 0;
    width: 160px;
    height: 160px;
    border: 20px solid transparent;
    border-radius: 50%;
}
.right-circle {
    right: 0;
    border-right: 20px solid green;
    border-top: 20px solid green;
}

right-circle

一个半圆弧出来了，但由于我们设置了上边框和右边框，所以上边框有一半溢出而被隐藏了，通过旋转得以还原：

1
2
3
4
5
6
7
8
9
10
.circle-progress {
    position: absolute;
    top: 0;
    width: 160px;
    height: 160px;
    border: 20px solid transparent;
    border-radius: 50%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

溢出部分被旋转出来而显示：
right-circle-rotate

所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现，变成一个全圆：

1
2
3
4
5
.left-circle{
    left: 0;
    border-bottom: 20px solid green;
    border-left: 20px solid green;
}

left-circle-rotate

然后就是要让圆环动起来，原理： 先让右半圆弧旋转180度，再让左半圆弧旋转180度。这样，两个半圆弧由于先后都全部溢出而消失了，所以看起来就是进度条再滚动的效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.right-circle {
  right: 0;
  border-right: 20px solid green;
  border-top: 20px solid green;
  -webkit-animation: circleProgressLoadRight 5s linear infinite;
}
.left-circle {
  left: 0;
  border-bottom: 20px solid green;
  border-left: 20px solid green;
  -webkit-animation: circleProgressLoadLeft 5s linear infinite;
}
@-webkit-keyframes circleProgressLoadRight {
  0% {
    -webkit-transform: rotate(45deg);
  }
  50%,
  100% {
    -webkit-transform: rotate(225deg);
  }
}
@-webkit-keyframes circleProgressLoadLeft {
  0%,
  50% {
    -webkit-transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(225deg);
  }
}

附上完整代码：

1
2
3
4
5
6
7
8
<div class="circle-progress-wrapper">
    <div class="wrapper right">
        <div class="circle-progress right-circle"></div>
    </div>
    <div class="wrapper left">
        <div class="circle-progress left-circle"></div>
    </div>
 </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.circle-progress-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 50px;
  margin-left: 200px;
  border: 1px solid #eee;
}
.wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100px;
  height: 200px;
}
.right {
  right: 0;
}
.left {
  left: 0;
}
.circle-progress {
  position: absolute;
  top: 0;
  width: 160px;
  height: 160px;
  border: 20px solid transparent;
  border-radius: 50%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.right-circle {
  right: 0;
  border-right: 20px solid green;
  border-top: 20px solid green;
  -webkit-animation: circleProgressLoadRight 5s linear infinite;
}
.left-circle {
  left: 0;
  border-bottom: 20px solid green;
  border-left: 20px solid green;
  -webkit-animation: circleProgressLoadLeft 5s linear infinite;
}
@-webkit-keyframes circleProgressLoadRight {
  0% {
    -webkit-transform: rotate(45deg);
  }
  50%,
  100% {
    -webkit-transform: rotate(225deg);
  }
}
@-webkit-keyframes circleProgressLoadLeft {
  0%,
  50% {
    -webkit-transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(225deg);
  }
}


See the Pen
YmVQvr by Iona (@lozoe)
on CodePen.

三、canvas

思路

  1. 先确定展示的形状，是整个圆、半圆还是一般的弧形

  2. 把确定好形状的圆弧均分100等份，计算出每一份所占的弧度

  3. 灰色圆弧占100份，红色圆弧最终占的份数由参数确定

  4. 设置setInterval定时器，重复执行画图操作

  • 清空画布
  • 先画灰色的圆弧，占100份
  • 再画红色的圆弧：红色圆弧的份数从0开始，每次加1
  • 当红色圆弧的份数达到指定值（传的参数）的时候，清除定时器

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Canvas-Progress-Bar</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>

    <script>
        draw(75);
        function draw(percent, sR) {
            if (percent < 0 || percent > 100) {
                return;
            }

            if (sR < Math.PI / 2 || sR >= 3 / 2 * Math.PI) {
                return;
            }

            var canvas = document.querySelector("#canvas");
            var cxt = canvas.getContext("2d");
            var cWidth = canvas.width;
            var cHeight = canvas.height;
            var baseColor = "#e1e1e1";
            var coverColor = "#fe4d43";
            var PI = Math.PI;
            var sR = sR || 1/2 * PI; // 默认圆弧的起始点弧度为π/2

            var finalRadian = sR + (PI + (PI - sR) * 2) * percent / 100; // 红圈的终点弧度
            var step = (PI + (PI - sR) * 2) / 100; // 一个1%对应的弧度大小
            var text = 0; // 显示的数字

            window.requestAnimationFrame(paint);
            // var timer = setInterval(function() {
            //     paint();
            // }, 30)
            function paint() {
                cxt.clearRect(0, 0, cWidth, cHeight);
                var endRadian = sR + text * step;
                // 画灰色圆弧
                // drawCanvas(cWidth/2, cHeight/2, 80, sR, sR + (PI + (PI - sR) * 2), baseColor, 2);
                drawCanvas(150, 150, 80, PI, PI * 4, baseColor, 2);
                // 画红色圆弧
                drawCanvas(150, 150, 80, sR, endRadian, coverColor, 2);

                // 数字
                cxt.fillStyle = coverColor;
                cxt.font = "40px PT Sans";
                var textWidth = cxt.measureText(text + "%").width;
                cxt.fillText(text + "%", cWidth / 2 - textWidth / 2, cHeight / 2 + 15);
                text++;

                if (endRadian.toFixed(2) < finalRadian.toFixed(2)) {
                    window.requestAnimationFrame(paint);
                }

                // if (endRadian.toFixed(2) >= finalRadian.toFixed(2)) {
                //   clearInterval(timer);
                // }
            }

            function drawCanvas(x, y, r, sRadian, eRadian, color, lineWidth) {
                cxt.beginPath();
                cxt.lineCap = "round";
                cxt.strokeStyle = color;
                cxt.lineWidth = lineWidth;
                cxt.arc(x, y, r, sRadian, eRadian, false);
                cxt.stroke();
            }
        }
    </script>
</body>
</html>


See the Pen
canvas progress bar by Iona (@lozoe)
on CodePen.

参考：

https://www.cnblogs.com/jr1993/p/4677921.html

http://reygreen1.github.io/2015/09/08/canvas-circle-progress/

https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html

https://segmentfault.com/a/1190000009514231

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Lozoe，<br>毕业于大连皇家民族学院，目前就职于驼厂<br><br>热爱大海与冷笑话，<br/>目前是一枚前端<br/><br/>爱生活，爱健身，爱编码<br>年轻无为，卖马为生。