用svg的circle制作一个loading动画

·  阅读 481

loading 加载中的效果在很多页面中都会使用,目的在于减少用户焦虑,提示用户该操作需要等待。

今天我们就来使用标签svg来制作一个loading效果。

预览效果:

222.gif

其中,svg 拥有很多的标签,我使用的是 <circle>。

一.涉及的标签属性

svg:

  • xmlns:定义默认的命名空间。
  • viewBox:这个svg图像的视窗大小。 写法形如(xAxis yAxis xValue yValue), 前两者表示x y坐标,相对于当前盒子(视口)左上角为原点,后两定义视窗的大小。
  • width/height: 表示图形绘制时所占据的空间大小,如果视窗的大小小于其中任何一个,那么图形就会被裁减,类似于overflow: hidden;

circle:

  • r: 圆形图像半径。
  • cx/cy: 圆形图像的圆心x y坐标,相对于参照同viewBox,这里设置为其宽高的一半即为正中心。
  • fill: 圆形图像填充颜色,这里当然是填充透明,设置值为none或者transparent均可。
  • stroke: 圆形图像轮廓颜色,类似于border-color。
  • stroke-width: 圆形图像轮廓宽度,类似于border-width。
  • 重点属性:stroke-dasharray, stroke-dashoffset
  1. stroke-dasharray:
  • 该属性定义圆形图像的轮廓以 实线-虚线-实线-虚线...... 的模式呈现,值为数组,10表示实线和虚线的长度各位10循环填画, 10, 20表示实线长度为10,虚线长度为20循环填画,其他复杂用法请自行百度。

  • 将圆形图像以圆心为坐标原点建立坐标轴,那么分割的起点就在于圆形图像与X轴正半轴交点,可以使用transfrom: rotate() 来改变初始起点。

  • 画笔方向为顺时针。

  1. stroke-dashoffset
  • 偏移的意思,该属性能够使得stroke-dasharray画出来的轮廓进行偏移,正值为向左偏移,负值则向右偏移,在圆形图像上就表现为正值逆时针,负值顺时针。

上述的这两个重要属性共同配合完成了这个动画的制作。

二.开始

1.首先我们先画一个最简单的圆形图像,像这样:

1.png

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    width="100"
    height="100"
>
    // 这里减去5的是因为加上轮廓宽度后会超出viewBox而进行裁剪。看客可以自行体验。
    // 可以理解为div没有设置box-sizing: border-box
    <circle
        cx="100"
        cy="100"
        r="(100 - 5) / 2"
        stroke="#1661ab"
        fill="transparent"
        stroke-width="5"
    />
</svg>
复制代码

2.接下来我们给他加上一些样式和动画(使用属性stroke-dasharray):

111g.gif

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    width="100"
    height="100"
>
    <circle
        class="svg-circle"
        cx="100"
        cy="100"
        r="(100 - 5) / 2"
        stroke="#1661ab"
        fill="transparent"
        stroke-width="5"
    />
</svg>

<style>
    .svg-circle{
        animation: loading-dash 1.5s linear infinite;
    }
    
    // C 表示圆形图像的周长: C = 2 * Math.PI * r
    // 2C虚线长只是为了在后面的偏移时不会出现下一个循环填画的实线。这里可以3C、4C、5C等等。
    @keyframes loading-dash {
    0%{
        stroke-dasharray: 1, 2C;
    }
    100%{
        stroke-dasharray: 0.9C, 2C;
    }
}
</style>
复制代码

3.现在我们给圆形图像加上偏移(stroke-dashoffset):

333g.gif

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    width="100"
    height="100"
>
    <circle
        class="svg-circle"
        cx="100"
        cy="100"
        r="(100 - 5) / 2"
        stroke="#1661ab"
        fill="transparent"
        stroke-width="5"
    />
</svg>

<style>
    .svg-circle{
        animation: loading-dash 1.5s linear infinite;
    }
    
    // 由于偏移效果,实线被后面的虚线覆盖,那么就可以形成一个擦掉前面的轮廓填画的动画效果。
    // stroke-dashoffset C 前的系数看客可以自行修改,选择自己喜欢的系数。
    @keyframes loading-dash {
    0%{
        stroke-dasharray: 1, 2C;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 0.9C, 2C;
        stroke-dashoffset: -.4C;
    }
    100%{
        stroke-dasharray: 0.9C, 2C;
        stroke-dashoffset: -C;
    }
    }
</style>
复制代码

4.最后一步,让svg旋转起来。

222.gif

<svg
    class="svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    width="100"
    height="100"
>
    <circle
        class="svg-circle"
        cx="100"
        cy="100"
        r="(100 - 5) / 2"
        stroke="#1661ab"
        fill="transparent"
        stroke-width="5"
    />
</svg>

<style>
    .svg{
        animation: loading-rotate 2s linear infinite;
    }
    .svg-circle{
        animation: loading-dash 1.5s linear infinite;
    }
    
    
    @keyframes loading-rotate {
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
    }
    
    @keyframes loading-dash {
    0%{
        stroke-dasharray: 1, 2C;
        stroke-dashoffset: 0;
    }
    50%{
        stroke-dasharray: 0.9C, 2C;
        stroke-dashoffset: -.4C;
    }
    100%{
        stroke-dasharray: 0.9C, 2C;
        stroke-dashoffset: -C;
    }
    }
</style>
复制代码

三.最后

只要理解好stroke-dasharray和stroke-dashoffset,你也可以写出很多骚得不行的loading效果。

比如这个(洒洒水啦):

444g.gif

分类:
前端
标签: