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

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"];
}