svg实现波浪动画的两种方案

这是我参与11月更文挑战的第15天，活动详情查看：2021最后一次更文挑战

介绍

相信大家波浪动画都见过不少，很多是通过纯css的boder-radius或者clip去实现方式众多，但我们本次用svg去画波浪来讲解其动画的两种方案，第一种是svg animateTransform实现，第二种为svg+css3 animation。先来一睹为快吧：

效果就是这样，接下来我们会从怎么绘制波浪，怎么用animateTransform做动画，怎么换用css3 animation这些开始讲起，准备好了么，这就出发~

正文

1.绘制波浪

<div class="page">
    <svg class="waves" viewBox="0 24 150 24" preserveAspectRatio="none">
        <defs>
            <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
        </defs>
        <use class="wave" xlink:href="#wave" fill="#4579e2" x="50" y="0"></use>
    </svg>
</div>

.page{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: rgb(48, 79, 107);
    .waves{
        width:100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
}

我们先放主容器div.page填充满屏，再将svg.waves填充满宽度并用绝对定位放在最底部，在svg中我们用defs先把波浪path写入当复用组件，在外面用use去引用他这样就出现一个波浪在屏幕最底下。

这就是我们看到的，但很多同学会问path怎么做啊，人力去做的确很费时，这有个简单方法，这里告诉大家一个svg的在线编辑器——svg-path-editor 。我们这里可见即所得，按照自己心意做绘制就可以拿到想要的路径信息了。

2.animateTransform动画

<use class="wave" xlink:href="#wave" fill="#4579e2" x="50" y="0">
    <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-90 0" to="85 0" dur="3.2s" repeatCount="indefinite" /> 
</use>

我们在use里面写入animateTransform标签，type表示要更改的属性，他和css3一样都有translate属性来改变为宜，from(translateX,translateY)到 to(translateX,translateY)来更改，dur是其动画周期，repeatCount是重复次数，indefinite表示无限次。

就是利用这么简单的一句话，我们就实现了波浪动画了。但是我们这个方案也是有弊端的，就是animateTransform本身兼容性还是不尽人意，而且控制起来灵活度不如css3 animation。

3.css3 animation动画

<g>
    <use class="wave" xlink:href="#wave" fill="#4579e2" x="50" y="0"></use>
    <use class="wave" xlink:href="#wave" fill="#3461c1" x="50" y="2"></use>
    <use class="wave" xlink:href="#wave" fill="#2d55aa" x="50" y="4"></use>
</g>

.waves{
    .wave{
        animation:move 3s linear infinite;
        @for $i from 1 through 3 {
            &:nth-child(#{$i}) {
                animation-delay:#{$i * -2s};
                animation-duration: #{12s - $i * 3s};
            }
        }
    }
    @keyframes move{
        from{
            transform: translate(-90px , 0%);
        }
        to{
            transform: translate(85px , 0%);
        }
    }
}

我们为了这些使用了三条波浪，然后我们在css中定义了animation也是做 translate位移的动画，但是我们可以定义延时属性将他们错位播放，好了虽然不是一行，但也很简单就完成了。

css3 animation操作多个元素的做不同延时的动画非常的容易，而且动画本身各项属性也容易扩展，至于兼容性也会好一些，非要说缺点的话，就是多写几行代码。

结语

我们通过以上学习了svg怎么实现动画的两种方案。css3相信大家都已经非常熟练了，但svg本身或许是很多同学的盲区，往后肯定要多多练习一下哦。如果英文比较好的可以康康w3c的svg文档，这里讲述的最为完全。