運(yùn)行效果
波浪效果圖
實(shí)現(xiàn)思路
- 定義一個(gè)View给郊，并增加圓形或者自定義背景視圖
- 畫出靜態(tài)正弦函數(shù)
- 遮罩，mask層
- 定時(shí)器捧灰，不斷的改變路徑上的各個(gè)點(diǎn)淆九，讓波浪動(dòng)起來(lái)
難點(diǎn)
三角函數(shù)：假設(shè) y = Asin（ωx+φ）+ C
A 表示振幅，也就是使用這個(gè)變量來(lái)調(diào)整波浪的最大的高度
ω 與周期相關(guān)毛俏，周期 T = 2 x pi / ω 即這個(gè)變量用來(lái)調(diào)整同寬度內(nèi)顯示的波浪的數(shù)量
φ 表示波浪橫向的偏移炭庙，也就是使用這個(gè)變量來(lái)調(diào)整波浪的流動(dòng)
C 表示波浪縱向偏移的位置。
如果你的三角函數(shù)還給了體育老師煌寇，我在網(wǎng)上大概找了一下比較詳細(xì)的教程可以參考下：
明白以上算法后煤搜，接下來(lái) very easy ! 直接上代碼。
1.畫出靜態(tài)三角函數(shù)
- (void)drawWaterWave{
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, VIEW_HEIGHT/2.0);
for (int i = 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:0 endAngle: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:0 endAngle: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)行了淌哟，根本停不下來(lái)迹卢！
- 本文只貼了核心的部分，如需完整徒仓，點(diǎn)我下載腐碱。
