iOS Animated Bezier/Sine Curve

Question

I am looking to animate a single-line bezier curve on a loop in iOS. The idea I have in my head resembles the Voice Control screen on the iPhone 4 before Siri. The curve does not need to react to anything ie. Audio, mic etc. It just needs to loop from screen left to screen right, and change the amplitude of the curve.

I have tried a couple tests and this is the closest I have come: IOS : Animate transformation from a line to a bezier curve

I need to know how to animated the actual curve to appear as if it is moving, not just up and down.

If any one has some light to shed on this, that would be awesome!

Thanks!

Answer 1

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

So the view where I draw my waves, is initialized as :

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

Then in my viewDidLoad, 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 a sort of linear motion you might want.

As far as the code for the wave goes, I'll share the drawrect.

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