Animating UICircularProgressView

Question

i am using UICircularProgressView and have changed it to my liking. the initialization is clear but i'll post it anyways:

UICircularProgressView *wheelProgress = [[UICircularProgressView alloc]initWithFrame:CGRectMake(someFrame)];

then i am setting the right progress CGFloat between 0-1

CGFloat progress = .3;   // example
[self.wheelProgress setProgress:progress];

This works just fine, and looks good, but i would really like to somehow animate it. I havent worked with animations so far, so my first approach was something like

for(tempProgress =! progress){
  incrementing tempProgress
  setting tempProgres to progressView
}

this of course is massively ugly and blocks everything else going on.

what i would like to achieve is a linear animation of the progress from 0 to its final value.

i have looked at: Animation tutorial

and came up with something like this:

CGContextRef context = UIGraphicsGetCurrentContext();
[UIView beginAnimations:nil context:context];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
[UIView setAnimationDuration: 1];
wheelProgress.progress = (progress) ? progress : 0.0;
[UIView commitAnimations];

but somehow this does not work..

any ideas what i need to fix here?

thanks in advance sebastian

Answer 1

The progress view you are using Is not set up to have the progress as a animatable property. To do so is quite complex and I'm not sure it is what you are looking for.

If it is, I think you would need to do the following (I haven't done this myself, this is just based on documentation and books that I have read):

1. Rewrite the view to use CALayers and drawInContext instead of drawRect
2. Make progress a property on the layer (use @dynamic instead of @synthesize
3. Override actionForKey: on the layer subclass and return a CABasicAnimation for the key @"progress"

Examples of this can be found in a few SO question / answers: here and here should get you started or at least used to the search terms that can be used. This looks like a good tutorial for drawing animated slices in a pie chart using layers, which may be closer to what you want than starting with the UICircularProgressView.

Alternatively, you could implement this instead using an NSTimer which increases the progress value every 1/60th of a second, until it hits your desired value.