動畫CAShapeLayer與波動畫

Question

下面我已附加圖片，我想實現下面的動畫。我嘗試過水波動畫，但不知道如何控制像上面的動畫。

我有CAShapeLayer其中我必須實現這個動畫。

初始化代碼

UIBezierPath *leftPath = [UIBezierPath bezierPath]; 
// Set the starting point of the shape. 
[leftPath moveToPoint:CGPointMake(0,self.bounds.size.height/2)]; 
// Draw the lines. 


[leftPath addLineToPoint:CGPointMake(0,self.bounds.size.height/2)]; 
[leftPath addLineToPoint:CGPointMake(self.bounds.size.width,self.bounds.size.height/2)]; 


leftLayer.path = leftPath.CGPath; 
leftLayer.strokeColor = [[UIColor whiteColor] CGColor]; 
leftLayer.fillColor = nil; 
leftLayer.borderWidth = 3.0f; 
leftLayer.lineCap = kCALineCapRound; 
leftLayer.lineJoin = kCALineJoinRound; 

leftLayer.borderColor=[UIColor blackColor].CGColor; 
[self.layer addSublayer:leftLayer]; 

動畫代碼

-(void)animateCureve{ 

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"]; 
pathAnimation.duration = 3.5; 
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; 
pathAnimation.fromValue = (id)leftLayer.path; 
pathAnimation.toValue = (id)[self wavePath].CGPath; 
pathAnimation.removedOnCompletion=NO; 
[leftLayer addAnimation:pathAnimation forKey:@"path"]; 
} 

曲線路徑

- (UIBezierPath *)wavePath { 
//set start and end accordingly 

UIBezierPath *startPath = [UIBezierPath bezierPath]; 
[startPath moveToPoint:CGPointMake(0, self.bounds.size.height/2)]; 
[startPath addCurveToPoint:CGPointMake(self.bounds.size.width, self.bounds.size.height/2) controlPoint1:CGPointMake(50, self.bounds.size.height/2+0) controlPoint2:CGPointMake(self.bounds.size.width/2, 20) ]; 



return startPath; 
} 

Answer 1

仔細觀察一下這些幀，它看起來像沿着路徑移動的淺的二次曲線。你可以嘗試的是爲曲線的開始和結束定義一個範圍，比如開始和結束，然後在中間添加控制點。然後在兩端添加直線。東西我趕緊說：

CGFloat start; 
CGFloat end; 
CGFloat heightOfQuad; 
CGFloat mid = (start + end)/2; 

UIBezierPath *path = [UIBezierPath bezierPath]; 
[path moveToPoint:CGPointMake(start, 0)]; 
[path addQuadCurveToPoint:CGPointMake(end, 0) controlPoint:CGPointMake(mid, heightOfQuad)]; 

UIBezierPath *startPath = [UIBezierPath bezierPath]; 
[startPath moveToPoint:CGPointMake(0, 0)]; 
[startPath addLineToPoint:CGPointMake(start, 0)]; 

UIBezierPath *endPath = [UIBezierPath bezierPath]; 
[endPath moveToPoint:CGPointMake(end, 0)]; 
[endPath addLineToPoint:CGPointMake(lengthOfViewHere, 0)]; 

[startPath appendPath:path]; 
[startPath appendPath:endPath]; 

*我沒有測試過這一點，但你可以給它一個去

UPDATE：

- (UIBezierPath *)wavePath { 

    CGFloat mid = (self.start + self.end)/2; 
    CGFloat y = self.frame.size.height; 

    UIBezierPath *curvePath = [UIBezierPath bezierPath]; 
    [curvePath moveToPoint:CGPointMake(self.start, y)]; 
    [curvePath addQuadCurveToPoint:CGPointMake(self.end, y) controlPoint:CGPointMake(mid, y - waveHeight)]; 

    UIBezierPath *startPath = [UIBezierPath bezierPath]; 
    [startPath moveToPoint:CGPointMake(0, y)]; 
    [startPath addLineToPoint:CGPointMake(self.start, y)]; 

    UIBezierPath *endPath = [UIBezierPath bezierPath]; 
    [endPath moveToPoint:CGPointMake(self.end, y)]; 
    [endPath addLineToPoint:CGPointMake(self.frame.size.width, y)]; 

    [startPath appendPath:curvePath]; 
    [startPath appendPath:endPath]; 

    return startPath; 
} 
- (void)setWavePosition:(CGFloat)wavePosition { 

    //from 0.0 to 1.0 
    _wavePosition = wavePosition; 

    //set start and end accordingly 
    CGFloat waveCoordinate = wavePosition * self.frame.size.width; 
    self.start = waveCoordinate - waveWidth/2; 
    self.end = waveCoordinate + waveWidth/2; 

    self.path = [self wavePath].CGPath; 
    [self setNeedsDisplay]; 
} 

玩弄一些，上面的代碼後在位置爲0.5，waveHeight爲5.0，波形寬度爲150.0，視圖寬度爲200.0時產生：

所有你需要做的就是設置w avePosition，然後wavePath將返回新的路徑。