CODEWITHSUNDEEP
iphoneiosipadcore-animationcore-graphics
chazzwozzer
chazzwozzer

Reputation: 467

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

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?

Upvotes: 4

Views: 9793

Answers (3)

Darkngs
Darkngs

Reputation: 6459

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".

Upvotes: 5

marika
marika

Reputation: 106

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

Upvotes: 2

David Rönnqvist
David Rönnqvist

Reputation: 56625

If you already know how to do it with a solid color then all you need to do is to create a new layer use as the mask of the image (the green circle). The alpha channel of the masking layer is used to determine what is visible so you could just use any of the examples you've already read that used a single color and use that for your mask. Properties of the mask layer can be animated to change it so that more or less of the image becomes visible.

So what you need to do is:

  • Align both images, the background and the green circle.
  • Create a new layer according to one of the examples you've read (you could look at my answers here or here for two more examples).
  • Set the new layer as the mask of the blue imageViews layer
  • Animate the circular progress of the mask layer.

Upvotes: 1

Related Questions