今天通过两个简单的加载动画让大家见识一下CSS与SVG结合的威力。

一、你需要准备什么？

对于svg，可能一些刚接触前端的同学比较的陌生。你可以先去MDN上看一下基本的介绍。本篇内容最重要的一个知识点就是stroke-dasharray和stroke-offset的组合使用。

这里你可以先看一下张鑫旭对于stroke相关属性的介绍

二、加载等待动画

这个动画大家应该很熟悉：

这个难度不是很大，本质上就是一个小圆弧在圆环上旋转。

    svg(viewBox="0 0 50 50")
        circle(class="item" cx="25" cy="25" r="20" fill="none")
        circle(class="item" cx="25" cy="25" r="20" fill="none")

对于圆环的设置我们采用stroke-dasharray来实现:

    .item:nth-child(2) {
        stroke: rgb(24,120,222);
        stroke-width: 2px;
        stroke-dasharray: 10, 300;
        stroke-linecap: round;
   }

接下来重点来了，我们需要通过transform让图形旋转。一谈到 transform不得不要注意transform-origin的设置。对于HTML中的元素，我们通过transform-origin的设置，很容易就解决了。但是SVG中的transform变化就没这么简单，这里有一篇很好文章作为参考张鑫旭SVG transform坐标变换

这里我就采用比较朴实的方法，旋转SVG：

    svg {
        animation: zfbloading 1.4s linear infinite;
    }
    
    @keyframes zfbloading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

三、加载失败动画

接下来我们实现这样的效果：

首先看一下它的结构：

    svg(viewBox="0 0 100 100")
        circle(cx="50" cy="50" r="40" fill="none")
        path(class="line1" d="M30 30 L70 70" fill="none")
        path(class="line2" d="M70 30 L30 70" fill="none")

首先对于外圈的动画我们还是采用stroke-dasharray和stroke-dashoffset来实现。但是这里你要完完全全的理解这两个属性的用法（好好看看上文提供的张鑫旭的文章），他通过一个火腿肠的例子很好的讲解了这两者的用法。

从动画效果可以看出，小圆弧在旋转的过程中长度由短边长，由长变短，最后形成一个圆。

    @keyframes loading {
        0% {
            stroke-dasharray: 0, 251;
            stroke-dashoffset: 0;
        }
        35% {
            stroke-dasharray: 86, 86;
            stroke-dashoffset: -86;
        }
        70% {
            stroke-dasharray: 0, 251;
            stroke-dashoffset: -251;
        }
        100% {
            stroke-dasharray: 251, 0;
            stroke-dashoffset: -251;
        }
    }

对于上述CSS代码中的251，你可以通过JS中的getTotalLength方法获取到。

对于叉号的动画效果，我们仍然采用的是stroke-dasharray和stroke-dashoffset实现。到这里你应该明白了这两个属性的重要性。再通过animation-delay设置动画的衔接。

四、总结

显然SVG的魅力不止于此，下次再见。

喜欢本文的小伙伴们,欢迎关注我的订阅号超爱敲代码,查看更多内容.