title: Animate sine wave
body: <p>i'm trying to animate a sine wave in a small frame, i have searched a lot on SO and on the web, but the only goal that I was able to reach it's draw a static sine wave that translate from one side to another side, but doens't want a translation i want an animation draw of the sinewave that repetedaly animate in a frame. Anyone can help me? this is what i do now:</p>
  
  <p>Wave.h</p>
  
  <pre><code>@interface Wave : UIView
  
  @end
  </code></pre>
  
  <p>Wave.m</p>
  
  <pre><code>@implementation Wave
  
  - (id)initWithFrame:(CGRect)frame
  {
  self = [super initWithFrame:frame];
  if (self) {
      // Initialization code
      self.backgroundColor = [UIColor clearColor];
  }
  return self;
  }
  
  - (void)drawRect:(CGRect)rect
  {
  [[UIColor colorWithRed:0 green:192/255.0 blue:255/255.0 alpha:1] set];
  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetLineWidth(context, 1);
  CGContextSetLineJoin(context, kCGLineJoinRound);
  float width = rect.size.width;
  const CGFloat amplitude = 30 / 4;
  for(CGFloat x = 0; x &lt; width; x += 0.5)
  {
      CGFloat y = amplitude * sinf(2 * M_PI * (x / width) * 5) + 30;
  
      if(x == 0)
          CGContextMoveToPoint(context, x, y);
      else
          CGContextAddLineToPoint(context, x, y);
  }
  
  CGContextStrokePath(context);
  }
  </code></pre>
  
  <p>then in a UIViewController i do this:</p>
  
  <pre><code>- (void)viewDidLoad
  {
  self.wave = [[Wave alloc] initWithFrame:CGRectMake(self.view.frame.size.width/2-58, 205, 90, 200)];
  [self.view addSubview:self.wave];
  
  [self animateWave];
  }
  
  - (void)animateWave {
  [UIView animateWithDuration:2.5 delay:0.0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveLinear animations:^{
      self.wave.transform = CGAffineTransformMakeTranslation(+self.wave.frame.size.width/2, 0);
  } completion:^(BOOL finished) {
      self.wave.transform = CGAffineTransformMakeTranslation(0, 0);
  }];
  }
  </code></pre>
  
  <p>but i doesn't want a translation, i want a continuous draw animation.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p><strong>I Have edit my question using the CADisplayLink suggest in the comment:</strong></p>
  
  <p>//  MainView.h</p>
  
  <pre><code>#import &lt;UIKit/UIKit.h&gt;
  #import &lt;QuartzCore/QuartzCore.h&gt;
  #import "AnimationLayer.h"
  
  @interface MainView : UIView
  {
  AnimationLayer *alayer;
  }
  
  @end
  </code></pre>
  
  <p>//  MainView.m</p>
  
  <pre><code>#import "MainView.h"
  
  @implementation MainView
  
  - (id)initWithFrame:(CGRect)frame
  {
  self = [super initWithFrame:frame];
  if (self) {
      // Initialization code
      [self setBackgroundColor:[UIColor clearColor]];
  
  }
  return self;
  }
  
  - (void)didMoveToSuperview
  {
  if ([self superview])
  {
  
      alayer = [[AnimationLayer alloc] init];
      alayer.frame = self.frame;
      [self.layer addSublayer:alayer];
  
  }
  }
  
  @end
  
  //  AnimationLayer.h
  
  #import &lt;Foundation/Foundation.h&gt;
  #import &lt;QuartzCore/QuartzCore.h&gt;
  
  @interface AnimationLayer : CALayer
  {
  CADisplayLink *displayLink;
  }
  
  @end
  </code></pre>
  
  <p>//  AnimationLayer.m</p>
  
  <pre><code>#import "AnimationLayer.h"
  
  static bool _running;
  
  @implementation AnimationLayer
  
  - (id)init
  {
  self = [super init];
  if (self)
  {
      displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];
      [self setNeedsDisplayOnBoundsChange:YES];
  }
  
  return self;
  }
  
  static CGPoint lastPoint = {0, 0};
  
  - (void)drawInContext:(CGContextRef)ctx
  {
  if (!_running)
  {
      [displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
      _running = YES;
      return;
  }
  
  CGContextSetStrokeColorWithColor(ctx, [[UIColor blackColor] CGColor]);
  CGRect rect = CGContextGetClipBoundingBox(ctx);
  CGContextSetLineWidth(ctx, 2);
  CGContextSetLineJoin(ctx, kCGLineJoinRound);
  float width = rect.size.width;
  const CGFloat amplitude = 30 / 4;
  
  CGContextMoveToPoint(ctx, lastPoint.x, lastPoint.y);
  lastPoint.x += 0.5;
  lastPoint.y = amplitude * sinf(2 * M_PI * (lastPoint.x / width) * 5) + 30;
  CGContextAddLineToPoint(ctx, lastPoint.x, lastPoint.y);
  
  CGContextStrokePath(ctx);
  
  if (lastPoint.x == rect.size.width)
  {
      [displayLink invalidate];
      _running = NO;
  }
  }
  
  @end
  </code></pre>
  
  <p>and using it in this way in a uiviecontroller:</p>
  
  <pre><code>MainView *view = [[MainView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
  [self.view addSubview:view];
  </code></pre>
  
  <p>now my problem is that the drawing code draw only a little little segment that move in a sine wave, but doesn't draw the line, only this little segment, this is all my code so you can try and see the problem, how i can fix it?</p>