¿Cómo puedo hacer un medidor de progreso circular con el uso de la image propia?

Quiero hacer un metro como esta foto.

introduzca la descripción de la imagen aquí

Tengo imágenes de 2 metros: image de medidor de color e image de medidor de gris.

Y quiero hacer una mater como se muestra en la image anterior al usarlos.

Pero no tengo ni idea.

Obtuve un código de muestra para hacer un medidor circular y llenar un poco de color en él. Aquí está ese código:

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

Si tienes una idea, por favor compártela conmigo. (está bien que tu idea use este cable o no)

Gracias.

Aquí hay un ejemplo bastante sólido, solo use esto como plantilla:

video show: https://www.youtube.com/watch?v=ucYqb0Gs1_8&feature=youtu.be

simplemente llame al segundo método, y el segundo método llamará al primer método, y allí lo tiene. Colóquelo en una vista de controlleres de vista y verá que sucede la magia:

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