5

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!

Community
  • 1
  • 1
Brian
  • 723
  • 1
  • 8
  • 26

1 Answers1

7

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);
JohnVanDijk
  • 3,546
  • 1
  • 24
  • 27
  • This is great! It is almost what i am looking for. The only problem that I see when I've tried this is the animation of the view is not really continuous. Any ideas? – Brian Jul 08 '13 at 21:17
  • I left certain smaller things for you to work out on purpose :/ – JohnVanDijk Jul 09 '13 at 04:25
  • 1
    Glad to help :) So what modifications did you end up making? – JohnVanDijk Jul 10 '13 at 04:06
  • What you're really doing here is drawing a sine wave once in your drawRect and then applying a UIView animation to move it left and right. This is a great solution if you don't need the frequency or amplitude of your wave to change. – cleverbit Mar 20 '14 at 22:15