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

3,038

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

介绍

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

VID_20211114_173523.gif

效果就是这样,接下来我们会从怎么绘制波浪,怎么用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去引用他这样就出现一个波浪在屏幕最底下。

微信截图_20211114162018.png

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

微信截图_20211114160212.png

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表示无限次。

VID_20211114_171058.gif

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

微信截图_20211114184039.png

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位移的动画,但是我们可以定义延时属性将他们错位播放,好了虽然不是一行,但也很简单就完成了。

VID_20211114_173523.gif

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

微信截图_20211114185541.png

结语

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