网易新闻客户端的这个水波效果出来很久了，我考虑了很长时间该如何实现，但是都没有很好的办法，幸好在一个动画牛人daixunry的文章里，知道了实现这个动画最关键的点。他的blog上面有许多优秀的动画案例，非常值的学习，blog的地址是http://www.jianshu.com/p/272aa1f26c62
这个动画的关键点就是正余弦函数。在听到这个的时候，我非常的震惊，原因是正余弦我们当初在高中的时候学习的知识，不过从来没有想过这些高中书本的知识竟然运用到了实际，非常的佩服kittenyang，同时感觉非常羞愧的，高中的知识都还给老师了，连正余弦的公式都忘记了。不熟悉的同学也可以去复习一下。
正弦型函数解析式：y=Asin（ωx+φ）+h
各常数值对函数图像的影响：
φ（初相位）：决定波形与X轴位置关系或横向移动距离（左加右减）
ω：决定周期（最小正周期T=2π/|ω|）
A：决定峰值（即纵向拉伸压缩的倍数）
h：表示波形在Y轴的位置关系或纵向移动距离（上加下减）
拆解和分析
好了，我们还是来拆解一下这个动画吧。两个波浪是两个正弦函数的效果叠加。首先我们看看该如何绘制一个波的曲线，如下图：
我们知道，计算机不可能绘制出一条完美的曲线，如果放大到像素的级别，可以看到这些曲线其实都是栅格的像素点组成。我们只能最大化的接近曲线，达到肉眼无法分辨的程度。如果想绘制出来一条正弦函数曲线，可以沿着假想的曲线绘制许多个点，然后把点逐一用直线连在一起，如果点足够多，就可以得到一条满足需求的曲线，这也是一种微分的思想。而这些点的位置可以通过正弦函数的解析式求得。
如果要绘制上面这个曲线，可以观察：波的峰值是1，周期是2π，初相位是0，h位移也是0。那么计算各个点的坐标公式就是y = sin(x);获得各个点的坐标之后，使用CGPathAddLineToPoint这个函数，把这些点逐一连成线，就可以得到最后的路径。
接下来问题来了，我们已经绘制了一条静态的曲线，如何让它形成一个流动的波呢？
可以这么思考：初始的曲线如上面所示，1s之后，希望曲线能成为下个形态：
接着，2s、3s...，曲线分别在不停的变化，如下图：
那么随着时间的流逝，这个曲线在不停的起伏变化，就形成了波动的效果。我们认真的想想，波动其实就是每一个点的y坐标都在不停的做着周期变化，想要实现上图1s之后的曲线形态，需要设置上面公式中的φ常量（初相位），假如φ是π/2，那么y=sin(x+φ)在x＝0位置的时候，y的值就不在是0，而是1，就得到一条变化的曲线。通过上面的分析，我们知道，需要建立一个时间和φ的函数。
我们可以创建一个定时器（当然做动画我们肯定不会使用计时器，这里举个例子，下面详解），假设每秒让φ自增π/2，这样第4s的时候，φ等于2π（一个周期），y=sin(x+2π)和y=sin(x)等效，又回到了初初始状态，这样就完成了一个波动周期，往下继续加下去，不停的往复这个波动周期动画。
如果我们希望波动的非常剧烈，也就是波流速很快，那么我们可以让初相位随着时间的函数波动更快，就可以实现了。
代码实现
把上面的原理落实到我们需要制作的动画上面。首先要总结出一个公式，确定正弦型函数解析式：y=Asin（ωx+φ）+h中各个常数的值。这里需要注意UIKit的坐标系统y轴是向下延伸。
1、我们的容器高度是100，我希望波的整体高度，固定在容器的一个相对的位置。
这里设置h ＝ 30；也就是说，当Asin（ωx+φ）计算为0的时候，这个时候y的位置是30；
2、决定波起伏的高度，我们设置波峰是5，波峰越大，曲线越陡峭；
3、决定波的宽度和周期，比如，我们可以看到上面的例子中是一个周期的波曲线，
一个波峰、一个波谷，如果我们想在0到2π这个距离显示2个完整的波曲线，那么周期就是π。
我们这里设置波的宽度是容器的宽度_waveWidth，希望能展示2.5个波曲线，周期就是_waveWidth／2.5。
那么ω常量就可以这样计算：2.5*M_PI/_waveWidth。
4、一共有两个波曲线，形成一个落差，也就是设置不同的φ（初相位），我们这里设置落差是M_PI/4。
5、时间和初相位的函数关系：我们在计时器的函数中一直调用_offset += _speed;
可以看到，如果我们设置波的速度speed越大，波的震动将会越快。
最后我们的公式如下：
CGFloat y = _waveHeight*sinf(2.5*M_PI*i/_waveWidth + 3*_offset*M_PI/_waveWidth + M_PI/4) + _h;
这些参数都可以自己调整，得到一个符合要求的效果。
现在我们解决了项目中最有难度的问题，剩下的事情就非常简单了。两个波是两个CAShapeLayer。我们使用CADisplayLink而不是计时器来驱动动画，因为CADisplayLink触发的时机是每隔一帧运行一次，而NSTimer不是很精确，会有阻塞的情况，照成动画卡顿的现象。
- (void)wave
{
_link = [CADisplayLink displayLinkWithTarget:self selector:@selector(doAni)];
[_link addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}
- (void)doAni
{
_offset += _speed;
//设置第一条波曲线的路径
CGMutablePathRef pathRef = CGPathCreateMutable();
//起始点
CGFloat startY = _waveHeight*sinf(_offset*M_PI/_waveWidth);
CGPathMoveToPoint(pathRef, NULL, 0, startY);
//第一个波的公式
for (CGFloat i = 0.0; i < _waveWidth; i ++) {
CGFloat y = 1.1*_waveHeight*sinf(2.5*M_PI*i/_waveWidth + _offset*M_PI/_waveWidth) + _h;
CGPathAddLineToPoint(pathRef, NULL, i, y);
}
CGPathAddLineToPoint(pathRef, NULL, _waveWidth, 40);
CGPathAddLineToPoint(pathRef, NULL, 0, 40);
CGPathCloseSubpath(pathRef);
//设置第一个波layer的path
_layer.path = pathRef;
_layer.fillColor = [UIColor lightGrayColor].CGColor;
CGPathRelease(pathRef);
//设置第二条波曲线的路径
CGMutablePathRef pathRef2 = CGPathCreateMutable();
CGFloat startY2 = _waveHeight*sinf(_offset*M_PI/_waveWidth + M_PI/4);
CGPathMoveToPoint(pathRef2, NULL, 0, startY2);
//第二个波曲线的公式
for (CGFloat i = 0.0; i < _waveWidth; i ++) {
CGFloat y = _waveHeight*sinf(2.5*M_PI*i/_waveWidth + 3*_offset*M_PI/_waveWidth + M_PI/4) + _h;
CGPathAddLineToPoint(pathRef2, NULL, i, y);
}
CGPathAddLineToPoint(pathRef2, NULL, _waveWidth, 40);
CGPathAddLineToPoint(pathRef2, NULL, 0, 40);
CGPathCloseSubpath(pathRef2);
_layer2.path = pathRef2;
_layer2.fillColor = [UIColor lightGrayColor].CGColor;
CGPathRelease(pathRef2);
}
我们可以看到，两个波曲线不但初相位不同，形成一个落差，而且相位随着时间的改变速度也不同，带来两个波的流速不同的视觉差异。CADisplayLink每帧都会调用wave方法，wave不停的改变着offset的值，也就是改变着初相位，最后形成了波动动画。