图片下拉放大，图片回到原来位置后出现波浪特效

项目介绍：

SJUserCenterHeader
DEMO 直接下载：

首先我们可以把如此丝滑的水波纹拆分一下下：

• 一条规律的曲线。
• 曲线匀速向右移动。
• 曲线下方的位置用颜色填充。

于是先来一条曲线吧。对于需要产生波动如此规律的曲线，我们首先想到的应该就是三角函数了。
例如我们熟悉的正弦曲线：

及其公式：
f(x) = Asin(ωx+φ)+k


而SDK也为我们提供了这个正弦函数：
extern double sin(double);

于是乎通过一个循环就能轻易地获取到这条曲线了：
[Objective-C] 查看源文件 复制代码

CGFloat y = 0.f;
for (CGFloat x = 0.f; x <= CGRectGetWidth(self.frame) ; x++) {
    y = height * sin(self.angularSpeed * x + self.offsetX);
    CGPathAddLineToPoint(path, NULL, x, y);
}

让它动起来我们需要在屏幕每次刷新的时候进行一次曲线的绘制，让它不断地刷新。
[Objective-C] 查看源文件 复制代码

self.waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(currentWave)];

而根据上面的正弦函数公式，曲线要向右移，其φ值就需要变小。于是在 currentWave 方法每次调用的时候，offsetX均减去同一个固定值，以实现匀速的运动。
[Objective-C] 查看源文件 复制代码

self.offsetX -= self.waveSpeed;

涂个颜色连个线，形成封闭空间：
[Objective-C] 查看源文件 复制代码

CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, height / 2);

CGFloat y = 0.f;
for (CGFloat x = 0.f; x <= CGRectGetWidth(self.frame) ; x++) {
    y = height * sin(self.angularSpeed * x + self.offsetX);
    CGPathAddLineToPoint(path, NULL, x, y);
}
CGPathAddLineToPoint(path, NULL, width, height);
CGPathAddLineToPoint(path, NULL, 0, height);
CGPathCloseSubpath(path);

再填个色：
[Objective-C] 查看源文件 复制代码

self.waveShapeLayer.fillColor = self.waveColor.CGColor;

好了。

多扯两句这水波纹并不限定在拖动过后才能波动，而是随时想动就动、想停就停。
于是最近我想到了一些新玩法，例如用作刷新等待视图。
教程出处：http://www.jianshu.com/p/0990d1d8d9c4

推荐：

专题集合 十六 每周iOS精选推送