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

i want make meter picture.

i have 2 meter images - color meter image , gray meter image.

and want make mater shown in above image using them.

but don't have idea.

i got sample code making circular meter , filling color in it. here 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 have idea,please share me. (it ok idea uses cord or not)

thank you.

here's robust example, use template:

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

just call second method, , second method call first method, , there have it. drop view controllers view , see 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"]; }