svg波浪动画

之前做过CSS动画和canvas动画，但是第一次做svg动画，最终效果如下图。分析从上图我们可以看出，波浪动画是由多个不同的“波浪”组成的，每个波浪都是由近似正弦曲线的图形组成的。最后的“波浪”效果实际上是由向左移动的静态波浪产生的。的。同时介绍了后面会用到的几个svg相关的标签：path：定义形状的基本元素，其中d属性是图形的路径。静态波是由该元素绘制的，后面会单独介绍animateTransform：定义目标元素的变形属性，利用该属性实现波的圆周运动g：结合对象的容器绘制一个单静态波上面是写的单波，其中d属性绘制形状，fill属性指示填充的颜色。d属性中使用了以下命令：M:Mxy表示移动到(x,y)点（svg中左上角为(0,0)点）Q:Qx1y1,x2y2表示绘制quadraticBesser贝塞尔曲线，x1y1是二次贝塞尔曲线的控制点，x2y2是终点，可以借助贝塞尔曲线工具生成。T:Txy表示生成之前二次贝塞尔曲线的镜像，其终点坐标为(x,y)V:Vy表示从当前点(x0,y0)垂直移动到(x0,y))H:Hx表示从当前点(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倍，这个可以想象一个正弦波形。注意这两点，波浪看起来已经有点了。多个波浪合成只有一个波浪，看起来还是不够逼真。合成多个不同周期的波浪，并填充不同透明度的颜色，形成最终效果。抽象成组件手写两个wave，你会发现很多地方都是一样的，总结之后你会发现只有svg的宽度、高度、周期、峰值、移动速度、初始偏移量（即正弦波的初始相位）、填充颜色、叠加的波数是可变的，所以可以做成组件隐藏内部复杂性