用svg的circle制作一个loading动画

鄙人不善于编程
3,360 阅读2分钟

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

avatar
文章
阅读
粉丝