动画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将返回新的路径。