Animate filling of a circular progress meter using an image mask in iOS

Question

I need to animate the filling of a circular progress meter with a HUD-like pie animation. I've found examples of how to do this using Core Animation to animate a path in a solid color. The difference is that I need the fill to be an image mask (see link), not a solid color.

Click here to see design images

Can someone provide a suggestion on how to go about this using Core Animation or anything else?

Answer 1

My example with magic numbers (for better understanding):

  CAShapeLayer *circle = [CAShapeLayer layer];
  circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath;
  circle.fillColor = [UIColor clearColor].CGColor;
  circle.strokeColor = [UIColor greenColor].CGColor;
  circle.lineWidth = 4;

  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  animation.duration = 10;
  animation.removedOnCompletion = NO;
  animation.fromValue = @(0);
  animation.toValue = @(1);
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
  [circle addAnimation:animation forKey:@"drawCircleAnimation"];

  [imageCircle.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
  [imageCircle.layer addSublayer:circle];

imageCircle - UIImageView with your custom "image mask".

Answer 2

Here's the basic tutorial for circular progress view:

http://iosdevtricks.blogspot.com/2013/06/custom-circular-progress-view-for-ios.html

You will need to make a few additional adjustments:

1. Put wooden-like texture as a background
2. Change circle color to green
3. Adjust circle's radius and circle's line width
4. Center circle so that it will fit wooden texture