类似淘宝的效果：

水波动画的关键点就是正余弦函数, 解析式：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、我们的容器是自定义的View，我希望波的整体高度，固定在容器的一个相对的位置。 这里设置h ＝ 20；也就是说，当Asin（ωx+φ）计算为0的时候，这个时候y的位置是20；
2、决定波起伏的高度，我们设置波峰是4，波峰越大，曲线越陡峭；
3、决定波的宽度和周期，比如，我们可以看到上面的例子中是一个周期的波曲线， 一个波峰、一个波谷，如果我们想在0到2π这个距离显示2个完整的波曲线，那么周期就是π。 我们这里设置波的宽度是容器的宽度View.width，希望能展示1.5个周期的波曲线，周期就是View.width／1.5。 那么ω常量就可以这样计算：1.5*2M_PI /View.width。
4、时间和初相位的函数关系：我们在计时器的函数中一直调用_offset += _speed;
可以看到，如果我们设置波的速度speed越大，波的震动将会越快。

现在我们解决了项目中最有难度的问题，剩下的事情就非常简单了。两个波是两个CAShapeLayer。我们使用CADisplayLink而不是计时器来驱动动画，因为CADisplayLink触发的时机是每隔一帧运行一次，而NSTimer不是很精确，会有阻塞的情况，照成动画卡顿的现象。

创建弧线layer代码实现

//self.originView是操作增加波纹的view
    CAShapeLayer *arcLayer = [CAShapeLayer layer];
    arcLayer.fillColor = [UIColor orangeColor].CGColor;
    arcLayer.frame = self.originView.bounds;
    arcLayer.shouldRasterize = YES;
    arcLayer.path = [self getLayerBezierPath].CGPath;
    [self.originView.layer addSublayer:arcLayer];

- (UIBezierPath *)getLayerBezierPath {
    CGFloat width = self.originView.frame.size.width;
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    [path addLineToPoint:CGPointMake(0, self.originView.frame.size.height - self.arcHeight)];
    [path addQuadCurveToPoint:CGPointMake(width, self.originView.frame.size.height - self.arcHeight) controlPoint:CGPointMake(width/2, self.originView.frame.size.height - self.arcHeight/2)];
    [path addLineToPoint:CGPointMake(width, 0)];
    [path closePath];
    return path;
}

两个波浪线的layer代码实现

    CAShapeLayer *(^getLayerBlock)() = ^{
        CAShapeLayer *layer = [CAShapeLayer layer];
        layer.fillColor = [UIColor whiteColor].CGColor;
        layer.frame = self.originView.bounds;
        layer.opacity = 0.3;
        layer.shouldRasterize = YES;
        [self.originView.layer addSublayer:layer];
        return layer;
    };
    self.rippleShapeLayer = getLayerBlock();
    self.rippleShapeLayer1 = getLayerBlock();

波浪线实现

- (UIBezierPath *)getWavePath:(CGFloat)A W:(CGFloat)w h:(CGFloat)h xOffset:(CGFloat)xOffset{
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, 0)];
    
    for (int i = 0; i < [UIScreen mainScreen].bounds.size.width; i++) {
        CGFloat y = A*sinf(w*i + xOffset+self.speed) + h;
        
        [path addLineToPoint:CGPointMake(i, y)];
    }
    
    [path addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width, 0)];
    [path closePath];
    return path;
    
}```

已经将view中添加波纹代码封装，其中.h文件代如下：

import <Foundation/Foundation.h>

import <UIKit/UIKit.h>

@interface CZCRippleTool : NSObject

//初始化

• (instancetype)initWithOriginView:(UIView *)originView;

• (instancetype)rippleToolWithOriginView:(UIView *)originView;

//波纹开始

• (void)start;

//显示的波浪数 default：1.5
@property (nonatomic,assign) CGFloat cycleNumber;

//波浪移动速度 default：0.05
@property (nonatomic,assign) CGFloat speed;

//颜色
@property (nonatomic,strong) UIColor *fillColor;

//波浪偏移量
@property (nonatomic,assign) CGFloat offsetY;

//弧度大小 default：50
@property (nonatomic,assign) CGFloat arcHeight;

//波振幅大小 defalut：4 值越大，波浪越高
@property (nonatomic,assign) CGFloat rippleAmplitude;

@end```

在viewController使用

[[CZCRippleTool rippleToolWithOriginView:self.headerView]  start];```

想学习基本动画的可以看我的[上篇](http://www.jianshu.com/p/106d1b5cf104)文章
[demo](https://github.com/2360219637/CZCRipple-Test) 欢迎star