由於前段時間發現自己在Github上的這份代碼被簡書上某用戶直接拷貝來發表了，而又並沒有注明代碼出處，於是決定還是自己著手寫一篇好了。

先看一下最終效果圖：

首先我們可以把如此絲滑的水波紋拆分一下下：

• 一條規律的曲線。

• 曲線勻速向右移動。

• 曲線下方的位置用顏色填充。

於是先來一條曲線吧。

對於需要產生波動如此規律的曲線，我們首先想到的應該就是三角函數了。

例如我們熟悉的正弦曲線：

及其公式：

f(x) = Asin(ωx+φ)+k

而SDK也為我們提供了這個正弦函數：

extern double sin(double);

於是乎通過一個循環就能輕易地獲取到這條曲線了：

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)];

而根據上面的正弦函數公式，曲線要向右移，其φ值就需要變小。於是在 currentWave 方法每次調用的時候，offsetX均減去同一個固定值，以實現勻速的運動。

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;

好了。

至於最後的漸變消失略簡單就不說了。有興趣的直接到文末下載完整代碼吧~

多扯兩句

這水波紋並不限定在拖動過後才能波動，而是隨時想動就動、想停就停。

於是最近我想到了一些新玩法，例如用作刷新等待視圖。

更多的玩法就自行發掘吧~

最後

完整代碼呈上：

Github: WXWaveView

其使用方法在該頁面中會有介紹。

喜歡的歡迎給個star～玩得開心哈。