Animate CAShapeLayer con animazione ad onda

Question

Di seguito ho un'immagine allegata, voglio ottenere l'animazione seguente. Ho provato l'animazione ad onda d'acqua ma non so come controllare l'animazione come sopra.

Ho CAShapeLayer in cui devo realizzare questa animazione.

codice Init

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

Codice Animazione

-(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"]; 
} 

The Path Curve

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

Osservando da vicino i fotogrammi, sembra una curva quadratica poco profonda che si muove lungo il percorso. Quello che potresti provare è definire un intervallo per l'inizio e la fine della curva, ad esempio inizio e fine, quindi aggiungere il punto di controllo nel mezzo. Quindi aggiungi le linee diritte alle due estremità successive. Qualcosa ho subito scritto:

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

* Non ho ancora testato questo fuori, ma si può dare un andare

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]; 
} 

Dopo aver suonato in giro per un po ', il codice di cui sopra genera questo con la posizione a 0.5, waveHeight a 5,0, e waveWidth di 150.0 in una larghezza di vista di 200.0:

Tutto quello che dovrebbe essere necessario fare è impostare w avePosition, e quindi wavePath restituirà il nuovo percorso.