Question

I am trying to understand how to animate simple objects in – (void)drawRect:(CGRect)rect in my UIView subclass (called MyView). I’m new to core animation and just not sure on the best way to do something like this.

I basically want to be able to capture touch coordinates and represent them as moving objects. I am able to save the touches using a NSMutableArray just fine.

I have spent alot of time reading through the Core Animation Programming Guide and Quartz2D Programming Guide. I am familiar with using sublayers and layers so please point me in the right direction if this is what I should be using for something like this.

My main goal is to be able to capture touch points and represent them as any shape that can move. Any help is appreciated.

#import "MyView.h"

@implementation MyView

@synthesize lastPoint;

NSMutableArray *myPoints;
CADisplayLink *theTimer;
float position = 0;

- (void) initializeTimer 
{   
    theTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(animateStuff:)];
    theTimer.frameInterval = 2; // run every other frame (ie 30fps)
    [theTimer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}

- (void) animateStuff:(NSTimer *)theTimer 
{
    position++;
    [self setNeedsDisplay];

}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code             
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)decoder
{
    if ((self = [super initWithCoder:decoder])) {

        // init array
        myPoints = [NSMutableArray array];

        position = 1;

        [self initializeTimer];

    }
    return self; 
}


- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event 
{            
    // store point in array
    UITouch *touch = [touches anyObject];
    lastPoint = [touch locationInView:self];
    [myPoints addObject:[NSValue valueWithCGPoint:lastPoint]]; // store CGPoint as NSValue

}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetLineWidth(context, 2.0);
    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);    
    CGContextSetFillColorWithColor(context, [UIColor orangeColor].CGColor);

    // draw all points in array
    NSUInteger pointCount = [myPoints count];
    for (int i = 0; i < pointCount; i++) {
        NSValue *v = [myPoints objectAtIndex:i];
        CGPoint p = v.CGPointValue;

        CGRect currentRect = CGRectMake(p.x-10+position, p.y-10, 20, 20);    
        CGContextAddRect(context, currentRect);  
    }
    CGContextDrawPath(context, kCGPathFillStroke);         
}

@end

Answer 1

What you really need is to draw a simple CALayer, with any shape you want – for example, 20×20 Rect, and every time you the touch occures – you say, you can grab the position already, just change that layer’s position – that’s all you need, just:

layer.position = newPosition;

And it will implicitly animate.