SVG + CSS 实现 Material Design Loading

SVG + CSS 实现 Material Design Loading

相信这个 loading 的标志大家都很熟悉,是不是很和谐?

SVG + CSS 实现 Material Design Loading

额...有毒,看得停不下来。既然,那么神奇,我就好奇地研(goo)究(gle)了一下。

原来它是 Material Design Progress(谷歌网站,你懂得)的一种 —— Circular。

在研究的过程中,发现有大神用 CSS + SVG 在 codePen 上实现了它。接着,就一步步来看这个魔性的 loading 是如何实现的。

既然,它是一个页面元素,那么,就先看看它的 dom 结构。

<div class="loader">
    <svg class="circular" viewBox="0 0 50 50">
        <circle cx="25" cy="25" r="20" fill="none"/>
    </svg>
</div>

可以看到,结构很简单,是一个 div 标签包裹一个 svg 标签(circlesvg 中的一个预定义形状,后面再讲)。div 大家都很熟悉,那么,svg 是什么哪?

可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。 ——wikipedia

同其他图像格式相比,svg 的主要优势在于:它是可伸缩的,即缩小、放大都不会影响显示的质量。

知道了,svg 标签是什么,那其中的 viewBox 属性又是用来干什么的?

viewBox

The viewBox attribute allows you to specify that a given set of graphics stretch to fit a particular container element. ——MDN

我的理解就是,选中 svg 中的一部分作为内容的显示区域来进行放大或缩小来适应整个 svg 的大小。(如果还是不太明白的,可以查看张鑫旭大神的文章,形象生动)

viewBox 的值是 4 个数字并用逗号分割,分别对应原 svg 图的 x 坐标,y 坐标,宽度,高度。通过这 4 个值就能在原 svg 图中划出一个矩形,然后将它缩放至现有 svg 的大小。

circle

明白了 svg 是用于描述图形,那该如何将图形画于其中哪?

svg 提供了一些预定义形状,除了之前用到的 circle,还有:

这里只用到了 circle,对其他有兴趣的可以直接点链接了解。

circle 的属性很简单,cx, cyr,对应圆心的 x 坐标,y 坐标和半径。

那例子中的就是画一个以 (25, 25)为圆心,半径为 20 的圆。

<circle cx="25" cy="25" r="20" fill="none"/>

fill 属性用来填充,这里 fill="none" 就是没有填充色。

ok。这样圆就完成了,但如果你也在一边尝试的话会发现,界面上依旧是一片空白。

别着急,刚刚只是前戏,正戏现在才开始。

SVG + CSS 实现 Material Design Loading

stroke

从最初的图中可以看到,并不是要画一个圆,而是画一段线,这段线围绕一个圆来运动。

画好了圆,给它加上外边线不就有了一个围绕圆的线了么,这就要用到 stroke

The stroke attribute defines the color of the outline on a given graphical element. The default value for the stroke attribute is none. ——MDN

也就是给图形的外线框添加颜色。

<circle cx="25" cy="25" r="20" fill="none" stroke="#106CFA"/>

这时,你就能看到一个蓝色的细环了。但是,太细了,可以通过 stroke-width 调整。

the stroke-width attribute specifies the width of the outline on the current object. Its default value is 1. If a <percentage> is used, the value represents a percentage of the current viewport. If a value of 0 is used the outline will never be drawn. ——MDN

刚才,觉得太细就是因为 stroke-width 的默认值是 1。这里将 stroke-width 设定成 5%,使用百分比的好处是:当它做成组件后,只需控制 svg viewport 的大小,线宽会自动调整粗细。

于是,代码又变成了这样

<circle cx="25" cy="25" r="20" fill="none"
        stroke="#106CFA" stroke-width="5%" />

loading 中的线段并不是一直保持环装,而是长短会变化,这该如何控制哪?

答案是:stroke-dasharray

the stroke-dasharray attribute controls the pattern of dashes and gaps used to stroke paths. ——MDN

也就是说,它是用来一组值来表示设置环绕在形状外部的虚线间隔。当这组值是偶数时,那么,它就分别表示线段长,间距长...,并以此类推。当它为奇数时,系统会默认追加相同的设置到末尾,使它成为偶数,然后再按偶数时的处理方式,如 5,3,2 就是 5,3,2,5,3,2。

你会想,虚线和 loading 有啥关系,loading 是一条线啊?没错,一开始我也是这样想的。

但,大神就想到了,如果将虚线的第一部分设定的足够长,那么它在可视范围内就是一条实线。于是,通过控制第一段实线的长度,也就控制了整条线段的长度。

因为,线段变长变短是一个过程,这就要用到动画。

.loader{
  // 省略...
  circle{
    animation: circle-dash 2s ease-in-out infinite;
  }
}

@keyframes circle-dash{
  0% {
    stroke-dasharray: 1, 125;
  }
  100% {
    stroke-dasharray: 125, 125;
  }
}

这时,你就能看到线段周而复始地从一根细线变为一个圆圈。但这有突然闪屏的感觉,和所要的结果不同,再修改一下动画,让线段成为圆圈后再退回成一根细线。

@keyframes circle-dash{
  0% {
    stroke-dasharray: 1, 125;
  }
  50% {
    stroke-dasharray: 125, 125;
  }
  100% {
    stroke-dasharray: 1, 125;
  }
}

是不是和结果越来越像了,但还是不对,loading 中的线段没有给人有倒退的感觉,那该如何做?

那就要使用 stroke-dashoffset,通过设定该属性线段的开始位置,来作出线段在不断前行的假象。

the stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash. ——MDN

再修改一下,刚刚的动画。

@keyframes circle-dash{
  0% {
    stroke-dasharray: 1, 125;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 100, 125;
    stroke-dashoffset: -25px;
  }
  100% {
    stroke-dasharray: 100, 125;
    stroke-dashoffset: -125px;
  }
}

这次感觉是不是很相像了,只是现在它的开口一直处于一个位置,就没什么魔性了。可以通过让整个圆形旋转起来,这样圆的开口的位置也就会不断变化了。

.circular{
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Finish!来看看最后的结果。(额,不支持 CodePen,可以到我的博客或直接到 CodePen 上查看)

SVG + CSS 实现 Material Design Loading

stroke 还有几个其他相关的属性,比如,stroke-linecap 可以用来改变线头的形状,其他还有 stroke-linejoin, stroke-miterlimit, stroke-opacity

最后

模拟 Material Design 的 loading 就这样完成了,并应用到了我的博客中,比如,首页的文章列表的懒加载。

最近,因工作需要搭了一个 React 全家桶 + Ant.Design 的脚手架,有兴趣的可以看看

最后不得不吐槽一句,React + Redux 相对于 vue 2 + vuex 用起来真心累...

相关推荐