CSS并不简单--结合SVG实现简单的加载动画

3,890 阅读2分钟

今天通过两个简单的加载动画让大家见识一下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的魅力不止于此,下次再见。


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