Animation when drawing with CGContext - ios

Question

My question is how to animate the drawing process when drawing with CGContextRef. Is it possible? Assuming it is, how?
I have two code snippets that I would like to animate. First one draws a progress bar and the second one draws a simple line chart. The drawing is done inside a subclass of UIView.
Progress bar is nice and easy. But I want it to sort of draw itself out from the left. I am pretty sure that this will require using something other than UIRectFill but I dont know how to accomplish it.
- (void)drawProgressLine
{
[bgColor set];
UIRectFill(self.bounds);
[graphColor set];
UIRectFill(CGRectMake(0, 0, self.frame.size.width / 100 * [[items objectAtIndex:0] floatValue], self.frame.size.height));
}
The line chart is a bit more complex. I would really really like it to start drawing itself from the left line by line slowly completing itself towards the right but if that is too much how can I just slowly fade it in? The code:
- (void)drawLineChart
{
[bgColor set];
UIRectFill(self.bounds);
[graphColor set];
if (items.count < 2) return;
CGRect bounds = CGRectMake(0, 50, self.bounds.size.width, self.bounds.size.height - 100);
float max = -1;
for (GraphItem *item in items)
if (item.value > max)
max = item.value;
float xStep = (self.frame.size.width) / (items.count - 1);
for (int i = 0; i < items.count; i++)
{
if (i == items.count - 1) break;
float itemHeight = bounds.origin.y + bounds.size.height - ((GraphItem*)[items objectAtIndex:i]).value / max * bounds.size.height;
float nextItemHeight = bounds.origin.y + bounds.size.height - ((GraphItem*)[items objectAtIndex:i + 1]).value / max * bounds.size.height;
CGPoint start = CGPointMake(xStep * i, itemHeight);
CGPoint stop = CGPointMake(xStep * (i + 1), nextItemHeight);
[self drawLineFromPoint:start toPoint:stop lineWidth:1 color:graphColor shadow:YES];
}
}
Pretty simple I guess. If important the drawLineFromPoint..... is implemented like:
- (void)drawLineFromPoint:(CGPoint)startPoint toPoint:(CGPoint)endPoint lineWidth:(CGFloat)width color:(UIColor *)color shadow:(BOOL)shadow
{
if (shadow)
{
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGFloat components[4] = {0.0, 0.0, 0.0, 1.0};
CGColorRef shadowColor = CGColorCreate(colorSpace, components);
CGContextSetShadowWithColor(UIGraphicsGetCurrentContext(), CGSizeMake(1,1), 2.0, shadowColor);
}
CGContextBeginPath(context);
CGContextSetLineWidth(context, width);
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextClosePath(context);
[color setStroke];
CGContextStrokePath(context);
CGContextSetShadowWithColor(context, CGSizeZero, 0, NULL);
}
I hope I made myself clear cause its 1 am in my country and this post is the last thing that stands between me and my bed. Cheers, Jan.

Answer 1

It sounds like you don't understand the UIKit view drawing cycle. Do you understand that each time you want to change the appearance of your custom-drawn view, you need to send it setNeedsDisplay? And then you need to redraw it entirely in your drawRect: method? Your drawing doesn't appear on screen until drawRect: returns, and after that you cannot draw more in that view until it receives another drawRect: message. If you want the contents of the view to be animated, you will need to send setNeedsDisplay to the view periodically (say, every 1/30th or 1/60th of a second, using either an NSTimer or a CADisplayLink).

Answer 2

It seems like you got the progress bar handled, so here is what I suggest for the graph drawing. Just create and debug your code once to draw the entire graph. Then, use a clip rect that you animate the width of, so that the clip rect starts out skinny and then extends in width until the whole graph becomes visible (from left to right). That will give the user the idea that whatever lines you have are "drawing" from the left to the right, but the actual code is very simple as the animation steps just modify the clip rect to make it wider for each "step". See this question for more info on the CoreGraphics calls: How to set up a clipping rectangle or area