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

使用圆环加载效果可以用可以采用 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
• SVG路径描边动画效果
• drawing in SVG