由于前段時間發(fā)現(xiàn)自己在Github上的這份代碼被簡書上某用戶直接拷貝來發(fā)表了盖文，而又并沒有注明代碼出處您单，于是決定還是自己著手寫一篇好了踢代。
先看一下最終效果圖：
首先我們可以把如此絲滑的水波紋拆分一下下：
- 一條規(guī)律的曲線砾脑。
- 曲線勻速向右移動兔乞。
- 曲線下方的位置用顏色填充岳守。
于是先來一條曲線吧凄敢。
對于需要產(chǎn)生波動如此規(guī)律的曲線，我們首先想到的應(yīng)該就是三角函數(shù)了湿痢。
例如我們熟悉的正弦曲線：
及其公式：
f(x) = Asin(ωx+φ)+k
而SDK也為我們提供了這個正弦函數(shù)：
extern double sin(double);
于是乎通過一個循環(huán)就能輕易地獲取到這條曲線了：
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);
}
讓它動起來
我們需要在屏幕每次刷新的時候進行一次曲線的繪制涝缝，讓它不斷地刷新。
self.waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(currentWave)];
而根據(jù)上面的正弦函數(shù)公式譬重，曲線要向右移拒逮，其φ值就需要變小。于是在 currentWave 方法每次調(diào)用的時候臀规，offsetX均減去同一個固定值滩援，以實現(xiàn)勻速的運動。
self.offsetX -= self.waveSpeed;
涂個顏色
連個線塔嬉，形成封閉空間：
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);
再填個色：
self.waveShapeLayer.fillColor = self.waveColor.CGColor;
好了玩徊。
至于最后的漸變消失略簡單就不說了。有興趣的直接到文末下載完整代碼吧~
多扯兩句
這水波紋并不限定在拖動過后才能波動邑遏，而是隨時想動就動佣赖、想停就停。
于是最近我想到了一些新玩法记盒，例如用作刷新等待視圖憎蛤。
更多的玩法就自行發(fā)掘吧~
最后
完整代碼呈上：
其使用方法在該頁面中會有介紹。
喜歡的歡迎給個star～玩得開心哈。
