水波浪效果如下
waterWave.gif
最近項目中用到一個小的波浪動畫晕粪，查閱了一些資料如下:
網(wǎng)上參考的一些效果
CDNS上的原理
主要實現(xiàn)方法
- 水波動畫的關(guān)鍵點就是正余弦函數(shù)
- 這個效果主要的思路是添加兩條曲線 一條正弦曲線、一條余弦曲線 然后在曲線下添加深淺不同的背景顏色亚情，從而達到波浪顯示的效果
正弦型函數(shù)解析式：y=Asin（ωx+φ）+h
各常數(shù)值對函數(shù)圖像的影響：
φ（初相位）：決定波形與X軸位置關(guān)系或橫向移動距離（左加右減）
ω：決定周期（最小正周期T=2π/|ω|）
A：決定峰值（即縱向拉伸壓縮的倍數(shù)）
h：表示波形在Y軸的位置關(guān)系或縱向移動距離（上加下減）
正弦.png
我們想要繪制一條函數(shù)摊腋，這個曲線其實都是柵格的像素點組成沸版。可以沿著假想的曲線繪制許多個點兴蒸，然后把點逐一用直線連在一起视粮，如果點足夠多，就可以得到一條滿足需求的曲線橙凳，這也是一種微分的思想蕾殴。而這些點的位置可以通過正弦函數(shù)的解析式求得。
如果要繪制上面這個曲線痕惋，可以觀察：波的峰值是1，周期是2π娃殖，初相位是0值戳，h位移也是0。那么計算各個點的坐標公式就是y = sin(x);獲得各個點的坐標之后炉爆，使用CGPathAddLineToPoint這個函數(shù)堕虹，把這些點逐一連成線卧晓，就可以得到最后的路徑。
另外一條波浪使用余弦函數(shù)赴捞，同樣的原理逼裆，使得2條波浪錯開顯示。
//繪制的部分代碼
CGFloat waterWaveWidth = self.bounds.size.width;
//初始化運動路徑
CGMutablePathRef path = CGPathCreateMutable();
CGMutablePathRef maskPath = CGPathCreateMutable();
//設(shè)置起始位置
CGPathMoveToPoint(path, nil, 0, _waveY);
//設(shè)置起始位置
CGPathMoveToPoint(maskPath, nil, 0, _waveY);
//初始化波浪其實Y為偏距
CGFloat y = _waveY;
//正弦曲線公式為： y=Asin(ωx+φ)+k;
for (float x = 0.0f; x <= waterWaveWidth ; x++) {
y = _waveAmplitude * sin(_wavePalstance * x + _waveX) + _waveY;
CGPathAddLineToPoint(path, nil, x, y);
}
現(xiàn)在 我們有了一條靜態(tài)的線赦政，那怎么讓他動起來呢胜宇？
平移后的圖像
我們可以讓他向左或者向右平移 每隔一段時間平移一次 使用CADisplayLink 使得平移看起來更加的流暢；
//以屏幕刷新速度為周期刷新曲線的位置
_disPlayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(waveAnimation:)];
[_disPlayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
然后在利用CAShapeLayer繪制該波浪恢着。
至此動畫的基本原理就搞清楚了桐愉，具體的代碼實現(xiàn)在demo地址 ：）
