svg波浪动画

之前做过CSS动画、canvas动画，但svg动画第一次做，最终效果如下图所示。

分析

由上图可以看出，波浪动画是由多个不同的‘波浪’组成，而每个波浪则是由近似正弦图形组成，最后的‘波动’效果，其实是静态的波浪循环向左运动产生的。

同时介绍后面会用到的几个svg相关标签：

• path：定义形状的基础元素，其中d属性就是图形的路径。静态的波浪就是这个元素绘制的，后面会再单独介绍

• animateTransform：定义目标元素的变形属性，波浪的循环移动就是使用这个属性实现的

• g：组合对象的容器

绘制单个静态波浪

上面是写好的单个波浪，其中d属性绘制了形状，fill属性表示填充的颜色。

d属性中使用了以下几个命令：

M：M x y表示移动到(x, y)点( svg中左上角是(0,0)点 )
Q：Q x1 y1, x2 y2表示绘制二次贝塞尔曲线，x1 y1为二次贝塞尔的控制点，x2 y2为终点，可以使用贝塞尔生产曲线工具帮助生成。
T：T x y表示生成上一个二次贝塞尔曲线的镜像，其终点坐标为(x,y)
V：V y表示从当前点(x0,y0)垂直移动到(x0, y)
H：H x表示从当前点(x0, y0)水平移动到(x, y0)

所以上面代码可以翻译后为：首先移动到(0,70)处，再绘制起点为(0,70)，终点为(150,70)，控制点为(75,39)的二次贝塞尔曲线，接着绘制已(300,70)为终点的镜像二次贝塞尔曲线，最后依次移动到(100,70)，(0,70)，(0,0),从而形成闭合曲线。

动起来

增加了animateTransform后就动其来了，该标签的几个属性含义为：

attributeName：需要运动的属性
type：具体运动的类型
from：运动初始值
to：运动终点值
dur：运动时间
repeatCount：重复次数，indefinite为无限循环

看了后就发现其实很简单，有一下几个点需要注意，首先path绘制图形的路径至少是svg宽加上from-to的宽，第二，to的值为周期的n/2倍，这个可以想象一下正弦的波形。注意了这两点，波浪看起来已经有点模样了。

多个波浪合成

只有一个波浪，看起来还是不够逼真，将多个不同周期波浪合成，并填充不同透明度的颜色形成最终效果。

抽象成组件

当手写两个波浪之后，就会发现很多地方是相同的，总结之后会发现只有svg的宽高、周期、峰值、移动速度、初始偏移量（即正弦的初相位）、填充颜色、叠加波浪个数这几个是变化的，因此可以做成组件，隐藏内部的复杂度。