最近項目需要做水波動畫蛤签，閑來無聊栅哀，把實現的思路和過程寫一下。話不多說戳晌，先上效果圖：
waveAnimation.gif
實現思路：
-
如何畫出波浪
由于波浪的形狀和我們的正弦余弦函數一樣躬厌，所以我們考慮使用三角函數圖像來畫線竞帽，查找蘋果是否為我們提供了相應的api，很高興我們找到了sin疙渣，cos函數：
水波動畫理論基礎
/**
使用正余弦畫出波浪
y=Asin(ωx+φ)+k
y=Acos(ωx+φ)+k
A——振幅妄荔，當物體作軌跡符合正弦曲線的直線往復運動時，其值為行程的1/2哗伯。
(ωx+φ)——相位篷角，反映變量y所處的狀態(tài)。
φ——初相(initial phase)虐块，x=0時的相位嘉蕾；反映在坐標系上則為圖像的左右移動。
k——偏距儡率，反映在坐標系上則為圖像的上移或下移喉悴。offsetY
ω——角速度(palstance)玖媚， 控制正弦周期(單位角度內震動的次數)婚脱。
正弦圖像在x軸平移π/2得到余弦圖像
*/
注意：屏幕的x,y軸在左上角，向下错森，向右為正方向
讓波浪動起來
讓波浪在界面上產生高低起伏的效果篮洁，我們只需平移曲線圖像，讓它的高低谷不斷出現在界面上即可瓦阐，這個由初相控制篷牌。
同時振幅控制著曲線的上下行程，所以波浪的大小由振幅決定戳杀。如何時刻改變初像，和振幅讓波浪動起來
我們需要使用CADisplayLink
CADisplayLink是一個能讓我們以和屏幕刷新率相同的頻率將內容畫到屏幕上的定時器信卡。我們在應用中創(chuàng)建一個新的 CADisplayLink 對象，把它添加到一個runloop中蚕泽，并給它提供一個 target 和selector 在屏幕刷新的時候調用须妻。
下面是實現的核心：修改振幅和初相的值泛领，畫sin和cos曲線錯開波浪
- (void)startWaveAnimation
{
/** 刷屏動畫 */
_waveDisplaylink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWavestate:)];
[_waveDisplaylink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}
- (void)getCurrentWavestate:(CADisplayLink *)displayLink
{
/**
使用正弦產生水波動畫
y=Asin(ωx+φ)+k
A——振幅，當物體作軌跡符合正弦曲線的直線往復運動時绰更，其值為行程的1/2锡宋。
(ωx+φ)——相位，反映變量y所處的狀態(tài)徐钠。
φ——初相役首，x=0時的相位；反映在坐標系上則為圖像的左右移動爹袁。
k——偏距矮固，反映在坐標系上則為圖像的上移或下移。
ω——角速度盹兢， 控制正弦周期(單位角度內震動的次數)辰晕。
*/
if (_increase) {
_variable += 0.01;//0.01;
}else{
_variable -= 0.01;//0.01;
}
if (_variable<=1) {
_increase = YES;
}
if (_variable>=1.5) {
_increase = NO;
}
CGFloat A = _variable * (_amplitude/1.5);
/** 改變初像，會改變 x 軸坐標會改變 */
_initialPhase += _wavespeed;
/** 貝塞爾曲線畫正弦曲線 */
for (int i = 0; i < self.waveLayers.count; i ++) {
CAShapeLayer *layer = self.waveLayers[i];
if (i == 0) {
CGFloat y = _offsetY;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, _offsetY)];
for (float x = 0.0f; x < CGRectGetWidth(self.frame); x ++) {
y = A * sin(_palstance * x + _initialPhase) + _offsetY;
[path addLineToPoint:CGPointMake(x, y)];
}
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
[path addLineToPoint:CGPointMake(0, CGRectGetHeight(self.frame))];
layer.path = path.CGPath;
}else {
CGFloat y = _offsetY;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, _offsetY)];
for (float x = 0.0f; x < CGRectGetWidth(self.frame); x ++) {
y = A * cos(_palstance * x + ((i - 1)*0.5 + 1)*_initialPhase) + _offsetY;
[path addLineToPoint:CGPointMake(x, y)];
}
[path addLineToPoint:CGPointMake(CGRectGetWidth(self.frame), CGRectGetHeight(self.frame))];
[path addLineToPoint:CGPointMake(0, CGRectGetHeight(self.frame))];
layer.path = path.CGPath;
}
}
}
通過它替裆，我們就可以以屏幕刷新率相同的頻率，刷新界面的曲線宜咒，產生波浪效果把鉴。
-
如果產生氣泡
一句話使用粒子發(fā)射引擎：CAEmitterLayer
總結：
水波動畫的實現主要使用下面的知識
1、CAShapeLayer 做載體
2场晶、貝塞爾曲線畫線（UIBezierPath）
3怠缸、正弦余弦控制控制波浪形狀，并錯開曲線
4扳炬、CADisplayLink 刷新界面產生動畫
5搔体、粒子引擎發(fā)射氣泡
