How can I make a circular progress meter with using own picture? - ios

Question

I want to make a meter like this picture.
I have 2 meter images - color meter image and gray meter image.
And I want to make a mater as shown in the above image by using them.
But I don't have any idea.
I got some sample code for making circular meter and filling some color in it. Here is that code:
CAShapeLayer *circle=[CAShapeLayer layer];
circle.path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:2*M_PI*0-M_PI_2 endAngle:2*M_PI*1-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];
If you have an idea,please share it with me.
(it is ok that your idea uses this cord or not)
Thank you.

Answer 1

Here's a fairly robust example, just use this as a template:
video show: https://www.youtube.com/watch?v=ucYqb0Gs1_8&feature=youtu.be
just call to the second method, and the second method will call the first method, and there you have it. Drop it into a view controllers view and you will see the magic happen:
#define DEGREES_TO_RADIANS(degrees) ((M_PI * degrees)/ 180)
-(void)this
{
[CATransaction begin];
[CATransaction setAnimationDuration:3.5];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation * drawAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
drawAnimation.removedOnCompletion = YES;
drawAnimation.autoreverses = YES;
drawAnimation.repeatCount = INFINITY;
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue = [NSNumber numberWithFloat:1.f];
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[arc addAnimation:drawAnimation forKey:#"thisone"];
[CATransaction commit];
[CATransaction begin];
[CATransaction setAnimationDuration:3.5];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
CABasicAnimation *drawAnimation1 = [CABasicAnimation animationWithKeyPath:#"strokeStart"];
drawAnimation1.removedOnCompletion = YES;
drawAnimation1.autoreverses = YES;
drawAnimation1.repeatCount = INFINITY;
drawAnimation1.fromValue = [NSNumber numberWithFloat:0.0];
drawAnimation1.toValue = [NSNumber numberWithFloat:-1.0];
[arc addAnimation:drawAnimation1 forKey:#"myKey"];
[CATransaction commit];
}
-(void)doGradientoutline {
float th = 50.00;
UIView * hellowkitt = [UIView new];
[hellowkitt setFrame:CGRectMake(SCREEN_WIDTH/2-(30+th)*2/2-th, SCREEN_HEIGHT/4-th, (30+th)*2+th*2, (30+th)*2+th*2)];
[self.view addSubview: hellowkitt];
UIView * imageView = [UIView new];
[imageView setFrame:CGRectMake(th, th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)];
[imageView setClipsToBounds:true];
[imageView.layer setCornerRadius:(hellowkitt.frame.size.width-th*2)/2];
[hellowkitt addSubview:imageView];
UIImageView * imageView1 = [UIImageView new];
[imageView1 setImage:[UIImage imageNamed:#"df"]];
[imageView1 setFrame:CGRectMake(hellowkitt.frame.origin.x+th, hellowkitt.frame.origin.y+th, hellowkitt.frame.size.width-th*2, hellowkitt.frame.size.height-th*2)];
[imageView1 setClipsToBounds:true];
[imageView1.layer setCornerRadius:imageView1.frame.size.height/2];
[self.view addSubview:imageView1];
int radius = imageView.frame.size.width/2+7;
arc = [CAShapeLayer layer];
[arc setFrame:imageView.frame];
UIBezierPath * aa =[UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.center.x, imageView.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(360) clockwise:YES];
arc.path = aa.CGPath;
arc.bounds = CGPathGetBoundingBox(aa.CGPath);
arc.frame = arc.bounds;
arc.fillColor = [UIColor clearColor].CGColor;
arc.strokeColor = [UIColor purpleColor].CGColor;
arc.lineWidth = 40;
[arc setLineCap:#"round"];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 0, hellowkitt.frame.size.width, hellowkitt.frame.size.height);
gradientLayer.colors = #[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor];
gradientLayer.backgroundColor = (__bridge CGColorRef)((__bridge id)[UIColor blackBean].CGColor);
gradientLayer.startPoint = CGPointMake(0.0,0.5);
gradientLayer.endPoint = CGPointMake(1.0,0.51);
CABasicAnimation *drawAnimation11 = [CABasicAnimation animationWithKeyPath:#"colors"];
drawAnimation11.duration = 2.00;
drawAnimation11.repeatCount = HUGE_VAL;
drawAnimation11.removedOnCompletion = NO;
drawAnimation11.fillMode = kCAFillModeForwards;
drawAnimation11.autoreverses = true;
drawAnimation11.fromValue = #[(__bridge id)[UIColor paperColorRedA700].CGColor, (__bridge id)[UIColor paperColorBlueA700].CGColor];
drawAnimation11.toValue = #[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
drawAnimation11.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.byValue = #(4 * M_PI);
animation.duration = 1.5f;
animation.repeatCount = INFINITY;
animation.removedOnCompletion = NO;
[self this];
gradientLayer.mask = arc;
[hellowkitt.layer addSublayer:gradientLayer];
[hellowkitt.layer addAnimation:animation forKey:#"fasdfaasdf"];
[gradientLayer addAnimation:drawAnimation11 forKey:#"thatone"];
}