Need help animating content in drawRect

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

Animating in drawRect is absolutely, categorically the wrong way to do it. That forces the graphics hardware to re-render the entire view each time. It will be very slow and jerky. You want to avoid triggering drawRect as much as possible.

Instead, you should use some form of animation. There are lots of options.

You can make each object a view, and use UIView animation methods like animateWithDuration:completion: or one of it's variants.

You can make each thing you want to animate a layer, add those layers as sublayers of your view, and animate them using either implicit animations (where you just change the position property or other "animatable" properties of the layer and the system animates the change for you) or explicit animations (where you create different types of CAAnimation objects and add them to your layer.)

Finally, you can use a CAShapeLayer, and animate the path that is installed in the layer. As long as you keep the same number and type of control points in the path between animation steps, you can animate a whole bunch of shapes at once using shape layers. You can also animate curves changing shape in complex ways and lots of other interesting effects. Animating curves inside a CAShapeLayer means using both CGPath objects and CAAnimation objects.

UIView animation is by far the easiest to use, and it's optimized for performance. If you CAN use view animation to do what you want, you probably should.

Next up in level of complexity is implicit layer animations.

Explicit animations using CAAnimation objects is the most complex, but also the most powerful.

Answer 2

What you really need is to draw a simple CALayer, with any shape you want - for example, 20x20 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.