炫酷的圆环加载及数字滚动效果（下）

使用圆环加载效果可以用可以采用css3+js的方式。这种方式首先我们得有一个圆的图片。。核心是采用显示隐藏的方式，并且依靠层级的方式来控制圆的加载过程。今天来看看svg实现圆环过渡的过程和原理。

svg

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。本质上是文本文件，体积较小，且不管放大多少倍都不会失真。

特性

SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。

语法

SVG 代码都放在顶层标签 <svg>之中。

// 实例1
<svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>

当然svg有很多基础知识,你可以点击这里进行学习查看。我们今天会用到的是defs和circle标签 来看下这两个标签的基本使用。
就看实例1会创建一个圆 cx cy定义了圆心的位置,不填默认为(0,0),r定义了圆的半径。

这里我们可以通过给svg添加类名,来改变圆的样式,当然做出一个圆环的效果我们还需要多几个属性。stroke,stroke-dasharray,stroke-dashoffset,fill,stroke-width属性。

stroke属性 : 定义了给定图形元素的外轮廓的颜色。它的默认值是none。

stroke-width属性 : 指定了当前对象的轮廓的宽度。它的默认值是1

stroke-dasharray属性 : 就是虚线的长度要默认为none,该值由两个值合写，使用英文逗号(,)分隔，第一个值是画出的每段实线线段的长度，第二个值是各段之间空隙的长度。如果无分隔，则说明两个值都是一样大小的。

stroke-dashoffset属性 : 表示虚线的起始偏移 loading圆环效果的重点之后会实例演示

fill 属性 : 图形元素的填充色,实现圆环效果时候需要设置为none

实例

介绍了上面的属性后我们来看看他们能实现怎么样的效果，首先来看怎么做成一个圆环的效果

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50" cy="50"  r="40" fill=none stroke=red stroke-dasharray="10" stroke-width=5  />
</svg>

我们已经做出一个圆环了,并且知道了基本的使用方法,接下来我们只需要搞清楚stroke-dashoffset属性就可以完成圆环的过渡效果了。那就来了解下stroke-dashoffset属性。
看了张鑫旭大佬的文章简单明了的案例解释的非常好。我也借用案例来说明stroke-dasharray和stroke-dashoffset的关系。

stroke-dasharray接收两个参数用,隔开一个表示长度(dash),一个表示间距(gap)如: '10,5' 多个值: '10,5 20,10'每两个为一组中间用空格隔开,设置了stroke-dasharray直线不仅样式变成虚线,根据设定好的虚线长度和间距不断循环下去

我们可以通过动态改变dash和gap来更加直观的了解stroke-dasharray属性

在了解了stroke-dasharray属性的机制最后登场的就是主角就是stroke-dashoffset通过动态改变它的值可以实现很多动画效果。 stroke-dashoffset属性指定了dash到路径开始的距离但是这里需要注意的是stroke-dashoffset偏移距离是相对于stroke-dasharray中 dash+gap的距离,因为直线的长度相当于dash+gap无限循环下去,可以将直线距离想象成截取了200px的长度,如果增加stroke-dashoffset的大小,相当于将直线向左移动。

如果将上图中的虚线长度和间隔都设置为200的时候

将stroke-dashoffset设置为200时,相当于将直线左移200这样可视区域中就没有展示出线条长度。当我们动态减小stroke-dashoffset的值到0,就会有一条直线出现。

针对上面的理论我们进行实践一波,在未设置stroke-dashoffset 直线会全部显示在可视区域中,当stroke-dashoffset改为200以后相当于全部移动到左边,通过动态减少值到0直线也会动态生成出来。

动态圆环loading

有了直线案例的实践,我们知道了其实我们看到的可视区域直线就是stroke-dasharray属性中dash,而通过gap来设置间距,然后通过stroke-dashoffset来调整控制显示虚线(dash)和间距(gap)的距离。一般采用的是,将dash和gap还有stroke-dashoffset的值设置成相同,然后通过动态减小stroke-dashoffset将dash部分挪到可视区域实现动画效果。有了理论知识,接下来我们来实践下圆的loading。

<svg xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      height="400">
      <defs>
        <linearGradient x1="20%"
          y1="50%"
          x2="10%"
          y2="100%"
          id="gradient1">
          <stop offset="0%"
            stop-color="rgba(255,0,255,.3)"></stop>
          <stop offset="100%"
            stop-color="rgba(0,255,255,.76)"></stop>
        </linearGradient>
      </defs>
      <circle ref="myCircle"
        class="circle"
        cx="144"
        cy="126"
        r="120.5"
        stroke="url('#gradient1')"
        stroke-width="10"
        fill=none></circle>
    </svg>

圆环的效果已经出来了,但是起始的方向好像不太对劲,使用transform中的旋转属性。

 <circle ref="myCircle"
        class="circle"
        cx="144"
        cy="126"
        r="120.5"
        stroke="url('#gradient1')"
        stroke-width="10"
        fill=none
        transform="matrix(0,-1,1,0,0,270)"></circle>

transform: matrix(s, a, a, s, d, d)s 代表缩放第一个 s 代表 X 轴第二个代表 Y 轴，a 代表倾斜第一个 a 代表 Y 轴倾斜第二个 a 代码 X 轴，0 代表偏移量第一个代表 X 轴第二个代表 Y 轴,d代表是xy周的偏移量当然你可以直接写一个`rotate(-90)`来改变方向,记得设置transform-origin

经过css矩阵调整以后loading圆环完成啦！

结语

介绍了svg的基本使用,重点介绍了stroke-dasharray属性和stroke-dashoffset属性的原理。实现一个loading也很好上手,赶快来做一个自己的圆环吧。下一篇将分享小米手环柱状图滑动的动画实现。

炫酷的圆环加载及数字滚动效果（下）

svg

特性

语法

实例

动态圆环loading

结语

参考