IOS Radar Effect Example detailed _ios

iOS Radar effect

This time the new app begins, and a product requirement is to do a radar chart similar to the following:

The middle picture is the user avatar and then needs to show a radar scan effect.

Analysis of the general composition of the radar map:

1. A uiimageview that presents the user's avatar at the bottom
2. Several color gradients of concentric circles, these concentric circles. You just need to paint it in the DrawRect method of the radar view.
3. A sector that is covered at the top, and the center of the sector and the center of the radar chart view is the same point. The scanning effect is to let this fan circle around the center of the circle, so the fan is a separate analogy better.
   

At the same time this radar map should provide two interfaces: Start animation, pause animation. Therefore, the interface of the radar chart's. h file is as follows:

@interface Cpradarview:uiview
-(void) start;//start scan
-(void) stop;//stop scanning
@end

The. m file is implemented as follows:

typedef ns_enum (Nsuinteger, Sectoranimationstatus) {//Fan View animation State Sectoranimationunstart, Sectoranimationisrunning,
Sectoranimationispaused,};   #define CIRCLEGAP @interface Cpradarview () @property (nonatomic, strong) Cpsectorview Sectorview;
Fan View @property (nonatomic, assign) sectoranimationstatus status;
  @end @implementation Cpradarview-(Instancetype) initWithFrame: (CGRect) Frame {if (self = [Super Initwithframe:frame]) {
  [Self setupui];
 _status = Sectoranimationunstart;
return self;
 }-(void) setupui {self.backgroundcolor = [uicolor Whitecolor];
  [Self Addsubview: ({cgrect temp = self.frame; Uiimageview ImageView = [[Uiimageview alloc] Initwithframe:cgrectmake ((temp.size.width-temp.size.width/3.0)/2.0, (TE
  mp.size.height-temp.size.width/3.0)/2.0, temp.size.width/3.0, temp.size.width/3.0)];
  ImageView.layer.cornerRadius = temp.size.width/6.0;
  ImageView.layer.masksToBounds = YES; Imageview.image = [UIImage imagenamed:@] hehe.
  JPG "]; Imageview
 })];
  [Self Addsubview: ({cgrect temp = self.frame;
  _sectorview = [[Cpsectorview alloc] initwithradius:temp.size.width/6.0 + 4 circlegap DEGREE:M_PI/6];
  CGRect frame = _sectorview.frame;
  frame.origin.x = (self.frame.size.width-frame.size.width)/2.0;
  FRAME.ORIGIN.Y = (self.frame.size.height-frame.size.height)/2.0;
  _sectorview.frame = frame;
 _sectorview;
})];
  }-(void) Start {if (_status = = Sectoranimationunstart) {_status = sectoranimationisrunning;
  Cabasicanimation rotationanimation;
  Rotationanimation = [cabasicanimation animationwithkeypath:@ "Transform.rotation.z"];
  Rotationanimation.tovalue = [NSNumber numberwithfloat:2 M_PI];
  Rotationanimation.duration = 5;
  Rotationanimation.cumulative = YES;
  Rotationanimation.removedoncompletion = NO;
  Rotationanimation.repeatcount = maxfloat;
  Rotationanimation.fillmode = Kcafillmodeforwards;
 [_sectorview.layer addanimation:rotationanimation forkey:@ "Rotationanimation"]; } if (_status = = Sectoranimationispaused) {_status = sectoranimationisrunning;
 [Self resumelayer:_sectorview.layer];
 }-(void) Stop {_status = sectoranimationispaused;
[Self pauselayer:_sectorview.layer]; /* Suspend animation @param layer Layer/-(void) Pauselayer: (calayer) layer {cftimeinterval pausedtime = [Layer CONVERTTIME:CAC
 Urrentmediatime () Fromlayer:nil];
 Layer.speed = 0.0;
Layer.timeoffset = Pausedtime;
 /* Restore animation @param layer Layer/-(void) Resumelayer: (calayer) layer {cftimeinterval pausedtime = [Layer Timeoffset];
 Layer.speed = 1.0;
 Layer.timeoffset = 0.0;
 Layer.begintime = 0.0;
 Cftimeinterval timesincepause = [Layer Converttime:cacurrentmediatime () Fromlayer:nil]-pausedtime;
Layer.begintime = Timesincepause; }/* is mainly used to draw concentric circles @param rect rect/-(void) DrawRect: (cgrect) Rect {cgcontextref context = Uigraphicsgetcurrentcontext
 (); Nsarray colors = @[[uicolor colorwithhexstring:@ "ff4e7d"], [Uicolor colorwithhexstring:@ "fd7293"], [Uicolor colorwithhexstring:@ "FCB8CD"], [Uicolor colorwithhexstring:@ "Fde9f2"], [Uicolor colorwithhexstring:@ "FCEBF3"]];
 CGFloat radius = rect.size.width/6.0;
  For (uicolor color in colors) {cgfloat red, green, blue, alpha;
  [Color getred:&red green:&green blue:&blue alpha:&alpha];
  Cgcontextsetrgbstrokecolor (context, red, green, blue, alpha);
  Cgcontextsetlinewidth (context, 1);
   Cgcontextaddarc (context, rect.size.width/2.0, rect.size.height/2.0, radius, 0, 2* m_pi, 0);
  Cgcontextdrawpath (context, kcgpathstroke);
 Radius = = Circlegap;

 }
}

Where Cpsectorview is defined as a pie view, it does nothing, just draws the pie, its. h file is as follows:

@interface Cpsectorview:uiview
-(Instancetype) Initwithradius: (cgfloat) Radius degree: (cgfloat) degree;
@end

RADIUS indicates the radius of the pie, and the degree represents the arc of the pie. Its m file is as follows:

@interface Cpsectorview () @property (nonatomic, assign) cgfloat radius;
@property (nonatomic, assign) CGFloat degree;  @end @implementation Cpsectorview-(Instancetype) Initwithradius: (cgfloat) Radius degree: (cgfloat) degree {self = [super
 Initwithframe:cgrectmake (0, 0, 2 radius, 2 radius)];
  if (self) {_degree = degree;
 _radius = radius;
 } Self.backgroundcolor = [Uicolor Clearcolor];
return self; }-(void) DrawRect: (cgrect) Rect {//Cgcontextref context = Uigraphicsgetcurrentcontext ();//Uicolor *acolor = [Uicolor C
olorwithhexstring:@ "ff4e7d" alpha:0.5];
Cgcontextsetrgbstrokecolor (context, 1, 1, 1, 0);
Cgpoint Center = cgpointmake (Cgrectgetmidx (rect), Cgrectgetmidy (rect)); Cgcontextsetfillcolorwithcolor (context, Acolor.cgcolor),//Fill color////Cgcontextmovetopoint (context, center.x,
CENTER.Y);
Cgcontextaddarc (context,center.x, Center.y, _radius, _degree/2.0,-_degree/2.0, 1);
Cgcontextclosepath (context); Cgcontextdrawpath (context, kcgpathfillstroke); DrawPath Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
 Uigraphicsbeginimagecontext (rect.size);
 Cgcontextref imgctx = Uigraphicsgetcurrentcontext ();
 Cgpoint Center = cgpointmake (Cgrectgetmidx (rect), Cgrectgetmidy (rect));
 Cgcontextmovetopoint (Imgctx, CENTER.X,CENTER.Y); Cgcontextsetfillcolor (Imgctx, cgcolorgetcomponents ([Uicolor Blackcolor].
 Cgcolor));
 Cgcontextaddarc (Imgctx, center.x, Center.y, _radius, _degree/2.0,-_degree/2.0, 1);
 Cgcontextfillpath (IMGCTX)//Draw fan mask Cgimageref mask = cgbitmapcontextcreateimage (Uigraphicsgetcurrentcontext ());
 Uigraphicsendimagecontext ();
 Cgcontextcliptomask (CTX, self.bounds, mask);
 CGFloat components[8]={1.0, 0.306, 0.49, 0.5,//start color (r,g,b,alpha) 0.992, 0.937, 0.890, 0.5//end color};
 For the sector to increase the radial gradient cgcolorspaceref space = Cgcolorspacecreatedevicergb ();
 Cggradientref gradient = cggradientcreatewithcolorcomponents (space, components, null,2);
 Cgcolorspacerelease (space), space=null;//release cgpoint start = center; Cgpoint End = center;
 CGFloat Startradius = 0.0f;
 CGFloat Endradius = _radius;
 Cgcontextref gractx = Uigraphicsgetcurrentcontext ();
 Cgcontextdrawradialgradient (gractx, gradient, start, Startradius, end, Endradius, 0);

 Cggradientrelease (gradient), gradient=null;//release}

If you do not make a radial color gradient for the sector, you can use the annotation code directly. The specific code does not explain, the annotation and function names are very clear.

The above is the iOS radar effect of data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!