使用 SVG 来实现波浪 (wave) 动画效果

如下图所示的波浪动画效果，实现方法有很多，比如CSS或者是js等方法都可以实现。不过，要是使用SVG来实现的，我觉得比其它两种方法都要简单。这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么的简单。



先来分析下这个波浪效果的实现原理。

波浪效果主要是由两个动画构成，一个是波浪上下位置的变化即改变元素的Y轴的值；另外一个波浪滚动的效果，其实是改变一个大的由SVG绘制的波浪的X轴的变化形成的。

整个效果的一个关键是使用矢量设计软件比如AI来设计一个波浪的形状：



类似的波浪形状使用AI中的钢笔工具很轻松就能绘制出来，SVG代码如下：

<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" data-name="3-waves" viewBox="0 0 600 215.43"><title>wave shape</title><path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5,2.67s-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S456,987.07,439,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S256,987.07,239,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06v205.06h600V996S656,987.07,639,986.07Z" </path></svg>

SVG默认路经填充是黑色的，可以在AI中直接定义路经的颜色，也可以通过样式来定义填充颜色。

波浪形状有了，下面来实现动画效果，先来定义基本的HTML效果：

<div class="wrapper">
<h3>animated svg</h3>
<div>
<div class="wave-svg-shape">
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" id="738255fe-a9fa-4a5e-963a-8e97f59370ad" data-name="3-waves" viewBox="0 0 600 215.43"><title>wave shape</title><path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5,2.67s-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S456,987.07,439,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S256,987.07,239,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06v205.06h600V996S656,987.07,639,986.07Z" transform="translate(-76 -985)"></path></svg>
</div>
</div>
</div>

类名为wave-svg-shape用来实现波浪在Y轴位置变化的动画效果；类名为wave-svg用来实现波浪在X轴变化的动画效果。

定义基本的CSS：

body > .wrapper {
margin: 50px auto;
text-align: center;
}
h3 {
margin-bottom: 50px;
}
body > .wrapper > div {
width: 100px;
height: 100px;
overflow: hidden;
display: block;
margin: 0 auto;
position: relative;
}
.wave-svg-shape {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
overflow: hidden;
transform: translateX(-100px);
}
.wave-svg-shape .wave-svg {
width: 100%;
height: auto;
overflow: hidden;
float: left;
fill: #00A1DF;
margin: 0;
}

在样式中，使用transform定义了波浪在X轴的初始位置，并且改变了波浪形状的填充颜色。

接下来是来编写两个动画效果的animation的keyframe，首先是类名为wave-svg-shape的动画效果，主要是transform来实现：

@keyframes fillUpSvg {
0% {
transform: translateY(calc(100px/2)) scaleY(0);
}
50% {
transform: translateY(0) scaleY(1);
}
100% {
transform: translateY(calc(100px/2)) scaleY(0);
}
}

从上面代码中可以看出主要是用来translateY和scaleY这两个属性，在初始的0%的点，元素在Y轴的位置为50px并且在Y轴的方向上的缩小为0，这样元素刚好是在可视范围之外。然后再改变元素的值为默认的值，就实现了波浪上下滚动的动画效果。

上下效果实现了，接下来是类名wave-svg元素在X轴上的滚动动画效果：

@keyframes waveSvgAnim {
0% {
transform: translateX(calc(-100px * 2));
}
100% {
transform: translateX(100px * 2);
}
}

这里就简单了，就是移动元素在X轴上的位置。整体CSS代码如下：

body > .wrapper {
margin: 50px auto;
vertical-align: top;
text-align: center;
}
h3 {
margin-bottom: 50px;
}
body > .wrapper > div {
width: 100px;
height: 100px;
overflow: hidden;
display: block;
margin: 0 auto;
position: relative;
}
.wave-svg-shape {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 100%;
overflow: hidden;
transform: translateX(-100px);
animation: fillUpSvg 10s ease-in-out infinite;
}
.wave-svg-shape .wave-svg {
width: 100%;
height: auto;
overflow: hidden;
float: left;
fill: #00A1DF;
margin: 0;
animation: waveSvgAnim 1s linear infinite;
}
@keyframes fillUpSvg {
0% {
transform: translateY(calc(100px/2)) scaleY(0);
}
50% {
transform: translateY(0) scaleY(1);
}
100% {
transform: translateY(calc(100px/2)) scaleY(0);
}
}@keyframes waveSvgAnim {
0% {
transform: translateX(calc(-100px * 2));
}
100% {
transform: translateX(100px * 2);
}
}

一个优雅的波浪滚动动画效果就实现了。这样类似的效果在一些加载动画上面用的比较多。



demo地址

现在浏览器对SVG的支持越来越好了，特别是移动端可以大胆的使用。好好的使用SVG这一利器，不仅能提高动画开发的效率，还可以大大提升动画的趣味性。