这是我参与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文档,这里讲述的最为完全。