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:
Wave.h
@interface Wave : UIView
@end
Wave.m
@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 < 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);
}
then in a UIViewController i do this:
- (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);
}];
}
but i doesn't want a translation, i want a continuous draw animation.
EDIT:
I Have edit my question using the CADisplayLink suggest in the comment:
// MainView.h
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#import "AnimationLayer.h"
@interface MainView : UIView
{
AnimationLayer *alayer;
}
@end
// MainView.m
#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 <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>
@interface AnimationLayer : CALayer
{
CADisplayLink *displayLink;
}
@end
// AnimationLayer.m
#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
and using it in this way in a uiviecontroller:
MainView *view = [[MainView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];
[self.view addSubview:view];
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?
