使用 SVG，实现带动画效果的圆环进度条

开始之前先来看下面这个动画效果（效果来源于codepen）：

实现方法多种多样，不过我认为使用SVG是一种最简单快捷的方法。其实它就是一个描边动画效果，实现起来毫不费力，在以前的文章中也讲过很多的关于描边动画效果的文章，比如SVG描边动画基本知识，描边实战等，可以去看看描边动画效果的一些基本知识。下面我们一步一步来实现这个圆环进度条的动画效果。

本文只是大概分析下实现思路，详细的代码可以去原地址查看。

首先需要准备两个圆圈，直接使用SVG中的circle元素就可以了，代码如下：

 <svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
  <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>

基本的图形准备好了之后，效果就好写了。动画效果主要是通过stroke-dashoffset这个属性和transition来实现效果的，关键的CSS代码就是下面这几句：

#svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear;
  stroke: #666;
  stroke-width: 1em;
}

圆形随着不同的数字的动画效果，是根据数字来动态改变边框的stroke-dashoffset的值，下面来简单分析下js代码（jQuery为基本库）：

首先是获取要操作的SVG节点和文本框的值：

  var val = parseInt($(this).val());
  var $circle = $('#svg #bar');

而要描边动画根据数字来动态变化，其实就是把用户输入的值占整个圆周长的百分比的值赋值给stroke-dashoffset就可以了。具体怎么计算了，首先需要得到圆形的周长：

 var r = $circle.attr('r');
 var c = Math.PI*(r*2);

需要注意一下，这里用到了圆的周长计算公式：

Math.PI*(r*2)

得到了圆的周长，下面就来计算当前的值占整个周长的比例，然后使用CSS方法赋值给strokeDashoffset：

var pct = ((100-val)/100)*c;

$circle.css({ strokeDashoffset: pct});

一个简单的圆环加载效果就完成了。

---

本文对你有帮助？欢迎扫码加入前端学习小组微信群：