運(yùn)行效果
波浪效果圖
實(shí)現(xiàn)思路
定義一個(gè)View，并增加圓形或者自定義背景視圖
畫出靜態(tài)正弦函數(shù)
遮罩斜筐，mask層
定時(shí)器龙致，不斷的改變路徑上的各個(gè)點(diǎn)，讓波浪動(dòng)起來
難點(diǎn)
三角函數(shù)：假設(shè)y = Asin（ωx+φ）+ C
A 表示振幅奴艾，也就是使用這個(gè)變量來調(diào)整波浪的最大的高度
ω 與周期相關(guān)净当，周期 T = 2 x pi / ω 即這個(gè)變量用來調(diào)整同寬度內(nèi)顯示的波浪的數(shù)量
φ 表示波浪橫向的偏移，也就是使用這個(gè)變量來調(diào)整波浪的流動(dòng)
C 表示波浪縱向偏移的位置蕴潦。
如果你的三角函數(shù)還給了敬愛的老師像啼，我在網(wǎng)上大概找了一下比較詳細(xì)的教程可以參考下：
正弦函數(shù)伸縮變換
三角函數(shù)平移變換和周期變換
明白以上算法后，接下來 very easy ! 直接上代碼潭苞。
1.畫出靜態(tài)三角函數(shù)
-?(void)drawWaterWave{
CGMutablePathRef?path?=?CGPathCreateMutable();
CGPathMoveToPoint(path,?NULL,0,?VIEW_HEIGHT/2.0);
for(inti?=0;?i?<=?VIEW_WIDTH?;?i++)?{
CGFloat?y?=?kWaveYMax?*?sin(kWaveDuration*i+self.waveOffset)?+?kWaveYOffset;
CGPathAddLineToPoint(path,?NULL,?i,?y);
}
CGPathAddLineToPoint(path,?NULL,VIEW_WIDTH,?VIEW_HEIGHT);
CGPathAddLineToPoint(path,?NULL,0,?VIEW_HEIGHT);
CGPathCloseSubpath(path);
self.waveLayer.path?=?path;
CGPathRelease(path);
}
2.定時(shí)器改變正弦的參數(shù)計(jì)算出新的位移忽冻，然后繪制
-?(void)changeWave{
self.waveOffset?+=?kWaveMoveSpeed;
[self?setNeedsDisplay];
}
-?(CADisplayLink?*)displayLink{
if(_displayLink?==?nil)?{
CADisplayLink?*?displayLink?=?[CADisplayLink?displayLinkWithTarget:self?selector:@selector(changeWave)];
[displayLink?addToRunLoop:[NSRunLoop?currentRunLoop]?forMode:NSRunLoopCommonModes];
_displayLink?=?displayLink;
}
return_displayLink;
}
3.添加背景，并且為上述繪制的波浪添加遮罩
-?(CAShapeLayer?*)circleShapeLayer{
if(_circleShapeLayer?==?nil)?{
CAShapeLayer?*?cirShapeLayer?=?[CAShapeLayer?layer];
[self.layer?addSublayer:cirShapeLayer];
UIBezierPath?*bPath?=?[UIBezierPath?bezierPathWithArcCenter:CGPointMake(VIEW_WIDTH/2.0,?VIEW_HEIGHT/2.0)?radius:VIEW_WIDTH/2.0-?kWaveMargin?startAngle:0endAngle:2*M_PI?clockwise:YES];
cirShapeLayer.path?=?bPath.CGPath;
_circleShapeLayer?=?cirShapeLayer;
}
return_circleShapeLayer;
}
-?(CAShapeLayer?*)waveLayer{
if(_waveLayer?==?nil)?{
CAShapeLayer?*?shapeLayer?=?[CAShapeLayer?layer];
shapeLayer.fillColor?=?[UIColor?grayColor].CGColor;
shapeLayer.lineWidth?=2.0f;
shapeLayer.strokeColor?=?[UIColor?redColor].CGColor;
[self.layer?addSublayer:shapeLayer];
shapeLayer.mask?=?self.circleShapeLayer;
_waveLayer?=?shapeLayer;
}
return_waveLayer;
}
-(CAShapeLayer?*)backShapeLayer{
if(_backShapeLayer?==?nil)?{
UIBezierPath?*bPath?=?[UIBezierPath?bezierPathWithArcCenter:CGPointMake(VIEW_WIDTH/2.0,?VIEW_HEIGHT/2.0)?radius:VIEW_WIDTH/2.0-?kWaveMargin?startAngle:0endAngle:2*M_PI?clockwise:YES];
CAShapeLayer?*?backShapeLayer?=?[CAShapeLayer?layer];
backShapeLayer.path?=?bPath.CGPath;
backShapeLayer.lineWidth?=3.0f;
backShapeLayer.fillColor?=?[UIColor?clearColor].CGColor;
backShapeLayer.strokeColor?=?[UIColor?blueColor].CGColor;
[self.layer?addSublayer:backShapeLayer];
_backShapeLayer?=?backShapeLayer;
}
return_backShapeLayer;
}
以上完成后此疹，水波動(dòng)畫就可以正常運(yùn)行了僧诚，根本停不下來！
