js svg语音波动动画_使用 SVG 来实现波浪 (wave) 动画效果

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

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

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

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

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

wave shape

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

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

animated svg

wave shape

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

定义基本的CSS：

body > .wrapper {

margin:50px auto;

text-align:center;<