iOS Animated Bezier/Sine Curve

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

  • PHP Apple Enhanced Push Notification read error response
  • How to use different interface declarations at compile time without confusing Interface Builder
  • Apps must follow the iOS Data Storage Guidelines or they will be rejected in app that contains .sqlite3
  • XCode Build not updating JS and HTML
  • How to make an universal iOS library for both Objective-C and Swift?
  • Swift Displaying Game Center Leaderboards
  • 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!


    Solutions Collect From Internet About “iOS Animated Bezier/Sine Curve”

    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);
    CGContextAddPath(context, path);
    CGContextDrawPath(context, kCGPathStroke);