最近项目中ui设计了个水波效果嘚背景动画，然而并没有gif或svg动画开始试着用css实现了一下，动画效果并不是很好网上查了下基本都是用贝赛尔曲线实现，想起以看的各種前波形图于是想着用三角函数图像初略模拟一下

一、绘制sin函数图像

sin函数表达式如下，

y=Asin（wx+φ）+h其中A表示振幅ω表示角频率（ω=2π/T,T为函數的周期），φ表示初相，h表示图像向y轴正方向平移的长度；（这里需要注意一下：h在数学学的本来是表示向上平移的但在canvas中采用的是屏幕坐标系，即左上角为原点h则表示向下平移）；绘制代码如下：

 

 这样我们可以得到以下图像：
 
 

 
 
 

二、为函数图像添加动画

 

 上面得到的是昰一个静态的函数图像，而我们一般见到的的波形图或水波都是随时间连续变化的这里就要用到上一步中的参数相位φ，（js即代码中的Q） ，我们将φ随时间不断增加或减小，即可得到不同时间的不同图像；使用window.requestAnimationFrame实现帧动画；
修改以上代码为：
 
 

 

 效果如下（渣渣截图软件）：
 
 

 
 
 

 

 鉯上路径虽有闭合但却不满足我们需要填充的部分，直接填充效果如下：
 
 

 
 
 

 完整填充路径应如图所示：
 
 

 
 
 

 闭合路径后创建一个渐变颜色作為填充颜色，代码如下：
 
 

 

 1、首先可以对上面波形叠加一个频率更高的波形使波形无规矩
 
 

 

 2、再添加一个相位变化不同的波形，其渐变填充與上一个渐变方向相反使其形成相互重叠的阴影效果；