IOS Animated Bezier / Sine Curve

Question

I am looking for an animation of a single-line bezier curve in a loop in iOS. The idea that I have in my head resembles the voice control screen on the iPhone 4 in front of Siri. The curve should not react to anything, i.e. Audio, microphone, etc. He just needs to loop from the screen on the left to the screen on the right and change the amplitude of the curve.

I tried a couple of tests, and this is the closest I came: IOS: converting animation from a string to a Bezier curve

I need to know how to animate the actual curve so that it looks as if it is moving, not just up and down.

If someone has some light to get rid of it, that would be awesome!

Thanks!

Answer 1

Wow, I worked on the same thing today. :) Check this out:

So, the view in which I draw the waves is initialized as:

_self_view = [[TDTWaveView alloc] initWithFrame:CGRectMake(-320, 174, 640, 200)]; 

Then in my view of [self animateWave]; I call [self animateWave]; once.

 - (void)animateWave { [UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveLinear animations:^{ _self_view.transform = CGAffineTransformMakeTranslation(+_self_view.frame.size.width/2, 0); } completion:^(BOOL finished) { _self_view.transform = CGAffineTransformMakeTranslation(0, 0); }]; } 

This gives the wave some linear motion that you may need.

As for the code for the wave, I will share the line.

 self.yc = 30//The height of a crest. float w = 0;//starting x value. float y = rect.size.height; float width = rect.size.width; int cycles = 7;//number of waves self.x = width/cycles; CGContextRef context = UIGraphicsGetCurrentContext(); CGMutablePathRef path = CGPathCreateMutable(); CGContextSetLineWidth(context, .5); while (w <= width) { CGPathMoveToPoint(path, NULL, w,y/2); CGPathAddQuadCurveToPoint(path, NULL, w+self.x/4, y/2 - self.yc, w+self.x/2, y/2); CGPathAddQuadCurveToPoint(path, NULL, w+3*self.x/4, y/2 + self.yc, w+self.x, y/2); w+=self.x; } CGContextAddPath(context, path); CGContextDrawPath(context, kCGPathStroke);