運行效果

波浪效果圖

實現(xiàn)思路

1. 定義一個View，并增加圓形或者自定義背景視圖

2. 畫出靜態(tài)正弦函數(shù)

3. 遮罩，mask層

4. 定時器，不斷的改變路徑上的各個點，讓波浪動起來

難點

三角函數(shù)：假設 y = Asin（ωx φ） C

A 表示振幅，也就是使用這個變量來調整波浪的最大的高度

ω 與周期相關，周期 T = 2 x pi / ω 即這個變量用來調整同寬度內顯示的波浪的數(shù)量

φ 表示波浪橫向的偏移，也就是使用這個變量來調整波浪的流動

C 表示波浪縱向偏移的位置。

如果你的三角函數(shù)還給了敬愛的老師，我在網(wǎng)上大概找了一下比較詳細的教程可以參考下：

• 正弦函數(shù)伸縮變換

• 三角函數(shù)平移變換和周期變換

明白以上算法后，接下來 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ù)計算出新的位移，然后繪制

- (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;

}