IOS imitation Alipay Sesame Credit score instrument panel animation effect _ios

First look at the effect chart:

Dashboard animation effects. jpg

1. Rotation of green dots on the ring

2. The variation of the number of points and the prompt language

3. Changes in background color

Directly on the main code:

1. Custom Zldashboardview Dashboard Files:

. h Files:

/**
 * According to the movement number
 * *
 * Determine percentage
 * now beat digital--> background color change
 * */

#import <UIKit/UIKit.h>
@ Interface Zldashboardview:uiview
@property (nonatomic, strong) UIImage *bgimage;
@property (nonatomic, copy) void (^timerblock) (Nsinteger);

/**
 * * * Movement Digital Refresh
 * * */
(void) Refreshjumpnofromno: (NSString *) Startno Tono: (NSString *) Tono;

@end

. m file

#import "ZLDashboardView.h" #import "uiview+extensions.h" #define Degreestoradians (x) (m_pi* (x)/180.0)//The way the angle is converted to PI s tatic Const CGFloat Kmarkerradius = 5.F;
Cursor diameter static const cgfloat Ktimerinterval = 0.03;

static const CGFloat kfastproportion = 0.9;

static const Nsinteger MaxNumber = 1000;
  @interface Zldashboardview () {cgfloat animationtime;
  Nsinteger Beginno;
  Nsinteger Jumpcurrentno;
Nsinteger Endno;

}//Percentage 0-100 According to the movement number set @property (nonatomic, assign) cgfloat percent; @property (nonatomic, strong) Cashapelayer *bottomlayer; progress bar Background @property (nonatomic, assign) CGFloat linewidth; Arc width @property (nonatomic, strong) Uiimageview *markerimageview; Cursor @property (nonatomic, strong) Uiimageview *bgimageview; Background picture @property (nonatomic, assign) CGFloat Circelradius; Round diameter @property (nonatomic, assign) CGFloat startangle; Starting angle @property (nonatomic, assign) CGFloat endangle; End Angle @property (nonatomic, strong) Uilabel *showlable; Jump Digital @property (noNatomic, strong) Uilabel *markedlabel;
Hint Language @property (nonatomic, strong) Nstimer *fasttimer;

@property (nonatomic, strong) Nstimer *slowtimer;

@property (nonatomic, assign) Nsinteger intervalnum; @end @implementation Zldashboardview #pragma mark-life cycle-(Instancetype) initWithFrame: (CGRect) frame {self =
  [Super Initwithframe:frame];

    if (self) {self.backgroundcolor = [uicolor Clearcolor];
    Self.circelradius = SELF.FRAME.SIZE.WIDTH-10.F;
    Self.linewidth = 2.f;
    Self.startangle = -200.F;

    Self.endangle = 20.F;
    Size needs to be adjusted according to the picture Self.bgImageView.frame = CGRectMake (6, 6, Self.circelradius, Self.circelradius * 2/3);
    Self.bgImageView.backgroundColor = [Uicolor Clearcolor];

    [Self addSubview:self.bgImageView];

    Add a circle box [self SETUPCIRCLEBG];

    cursor [self setupmarkerimageview];
  Add movement numbers and prompts [self setupjumpnoview];
return self; }-(void) SETUPCIRCLEBG {//circular path Uibezierpath *path = [Uibezierpath bezierpathWitharccenter:cgpointmake (SELF.WIDTH/2, SELF.HEIGHT/2) Radius: (self.circelradius-self.li Newidth)/2 Startangle:degreestoradians (Self.startangle) Endangle:de

  Greestoradians (Self.endangle) Clockwise:yes];
  Background Self.bottomlayer = [Cashapelayer layer];
  Self.bottomLayer.frame = Self.bounds;
  Self.bottomLayer.fillColor = [[Uicolor clearcolor] cgcolor];
  Self.bottomLayer.strokeColor = [[Uicolor colorwithred:206.f/256.f green:241.f/256.f blue:227.f alpha:1.f] cgcolor];
  self.bottomLayer.opacity = 0.5;
  Self.bottomLayer.lineCap = Kcalinecapround;
  Self.bottomLayer.lineWidth = Self.linewidth;
  Self.bottomLayer.path = [path Cgpath];

[Self.layer AddSublayer:self.bottomLayer]; 240 is with the angle of the whole radian and |-200| + =//[self Createanimationwithstartangle:degreestoradians (self.startangle)//Endangle:degreestor
Adians (Self.startangle + 220 * 1)]; }-(VOID) Setupmarkerimageview {if (_markerimageview) {return;
  } _markerimageview = [[Uiimageview alloc] init];
  _markerimageview.backgroundcolor = [Uicolor Clearcolor]; _markerimageview.layer.backgroundcolor = [Uicolor Greencolor].
  Cgcolor; _markerimageview.layer.shadowcolor = [Uicolor Whitecolor].
  Cgcolor;
  _markerimageview.layer.shadowoffset = cgsizemake (0, 0);
  _markerimageview.layer.shadowradius = kmarkerradius*0.5;
  _markerimageview.layer.shadowopacity = 1;
  _markerimageview.layer.maskstobounds = NO;
  Self.markerImageView.layer.cornerRadius = SELF.MARKERIMAGEVIEW.FRAME.SIZE.HEIGHT/2;
  [Self addSubview:self.markerImageView];
_markerimageview.frame = CGRectMake ( -100, Self.height, Kmarkerradius, Kmarkerradius);
  }-(void) Setupjumpnoview {if (_showlable) {return;
  } cgfloat width = self.circelradius/2 + 50;
  CGFloat height = self.circelradius/2-50; CGFloat Xpixel = Self.bgImageView.left + (self.bgimageview.width-width) *0.5;//self.circelradius/4;
  CGFloat ypixel = SELF.CIRCELRADIUS/4;
  CGRect labelframe = CGRectMake (Xpixel, ypixel, width, height);
  _showlable = [[Uilabel alloc] initwithframe:labelframe];
  _showlable.backgroundcolor = [Uicolor Clearcolor];
  _showlable.textcolor = [Uicolor Greencolor];
  _showlable.textalignment = Nstextalignmentcenter;
  _showlable.font = [Uifont systemfontofsize:100.f];
  _showlable.text = [NSString stringwithformat:@ "%ld", Jumpcurrentno];

  [Self addsubview:_showlable];
  Hint language _markedlabel = [[Uilabel alloc] Initwithframe:cgrectmake (Xpixel, Cgrectgetmaxy (_showlable.frame), width, 30)];
  _markedlabel.backgroundcolor = [Uicolor Clearcolor];
  _markedlabel.textcolor = [Uicolor Greencolor];
  _markedlabel.textalignment = Nstextalignmentcenter;
  _markedlabel.font = [Uifont systemfontofsize:20.f];
  _markedlabel.text = @ "Good nutrition";
[Self Addsubview:_markedlabel]; #pragma mark-animation-(void) Createanimationwithstartangle: (cgfloat) startangle endangle: (cgfloat) EndAngle {//cursor moveDraw//Start timer [_fasttimer setfiredate:[nsdate Distantpast]];
  Set animation properties Cakeyframeanimation *pathanimation = [cakeyframeanimation animationwithkeypath:@ "position"];
  Pathanimation.calculationmode = kcaanimationpaced;
  Pathanimation.fillmode = Kcafillmodeforwards;
  Pathanimation.removedoncompletion = NO;
  pathanimation.duration = _percent * KTIMERINTERVAL;
  Pathanimation.timingfunction = [Camediatimingfunction functionwithname:kcamediatimingfunctioneaseout];

  Pathanimation.repeatcount = 1;
  Set Animation path Cgmutablepathref path = Cgpathcreatemutable (); Cgpathaddarc (Path, NULL, SELF.WIDTH/2, SELF.HEIGHT/2, (SELF.CIRCELRADIUS-KMARKERRADIUS/2)/2, startangle, EndAngl
  E, 0);
  Pathanimation.path = path;

  Cgpathrelease (path);

[Self.markerImageView.layer addanimation:pathanimation forkey:@ "Movemarker"]; #pragma mark-setters/getters/** * Start animation determine percent */-(void) Refreshjumpnofromno: (NSString *) Startno Tono: (nsstr ing *) Tono {Beginno = 0;//[startno IntegervAlue];
  Jumpcurrentno = 0;//[startno IntegerValue];
  Endno = [Tono IntegerValue];

  _percent = Endno * 100/maxnumber;
  Nsinteger diffnum = Endno-beginno;
  if (diffnum <= 0) {return;
  if (Diffnum < MB) {_intervalnum = 5;
  else if (Diffnum <) {_intervalnum = 15;
  else if (diffnum <= maxnumber) {_intervalnum = 10;

  } NSLog (@ "digital interval:%ld", _intervalnum);

  Number [self setupjumpthings];
  Set angle Nsinteger angle = 0;
  Nsinteger num = [Tono floatvalue]-[Startno floatvalue];
  if (num <) {angle = Self.startangle + (num/200.0)/5.0;
  else if (num <) {angle = Self.startangle + 220/5.0 + (3/5.0 *) * (num-200)/150.0;
  else {angle = Self.startangle + 220/5.0 * 4 + (220/5.0) * (num-350)/250.0; }//cursor [self Createanimationwithstartangle:degreestoradians (self.startangle) Endangle:degreestoradian
s (angle)]; }-(void) Setbgimage: (UIImage *) Bgimage {_Bgimage = Bgimage;
Self.bgImageView.image = Bgimage;
  }-(Uiimageview *) Bgimageview {if (nil = = _bgimageview) {_bgimageview = [[Uiimageview alloc] init];
return _bgimageview;

  #pragma mark-Movement number-(void) setupjumpthings {animationtime = _percent * KTIMERINTERVAL;
                      Self.fasttimer = [Nstimer timerwithtimeinterval:ktimerinterval*kfastproportion target:self
  Selector: @selector (fasttimeraction) Userinfo:nil Repeats:yes];

  [[Nsrunloop Currentrunloop] Addtimer:_fasttimer formode:nsrunloopcommonmodes];

  Time interval = (total time-fast interval * number of changes)/again the number of changes required//fast time Nsinteger Fastendno = Endno * kfastproportion;
  Nsinteger fastjump = Fastendno/_intervalnum;
    if (fastjump% _intervalnum) {fastjump++;
  Fastendno + = _intervalnum;

  } cgfloat fastttime = fastjump*ktimerinterval*kfastproportion;
  The remaining runout times nsinteger Changno = Endno-fastendno; Nsinteger endjump = Changno/_intErvalnum + changno% _intervalnum;

  Slow time interval Nstimeinterval slowinterval = (animationtime-fastttime)/endjump; Self.slowtimer = [Nstimer timerwithtimeinterval:slowinterval target:self Sele
  ctor: @selector (slowtimeraction) Userinfo:nil Repeats:yes];
  [[Nsrunloop Currentrunloop] Addtimer:_slowtimer formode:nsrunloopcommonmodes];
  [_fasttimer setfiredate:[nsdate Distantfuture]];
[_slowtimer setfiredate:[nsdate Distantfuture]];
    #pragma mark Accelerator Timer trigger event-(void) Fasttimeraction {if (Jumpcurrentno >= endno) {[Self.fasttimer invalidate];
  Return
    } if (Jumpcurrentno >= Endno * kfastproportion) {[Self.fasttimer invalidate];
    [Self.slowtimer setfiredate:[nsdate Distantpast]];
  Return
} [self commontimeraction];
    #pragma mark deceleration Timer trigger event-(void) Slowtimeraction {if (Jumpcurrentno >= endno) {[Self.slowtimer invalidate];
  Return } [Self CommontiMeraction]; #pragma mark Timer Commonality event-lable assignment background color and prompt change-(void) Commontimeraction {if (jumpcurrentno% = 0 && JUMPCU
    Rrentno!= 0) {Nsinteger ColorIndex = jumpcurrentno/100; Dispatch_async (Dispatch_get_main_queue (), ^{if (self. Timerblock) {self.
      Timerblock (ColorIndex);
  }
    });

  } Nsinteger Changevalueby = Endno-jumpcurrentno;
  if (CHANGEVALUEBY/10 < 1) {jumpcurrentno++;
    else {//Nsinteger Changeby = CHANGEVALUEBY/10;
  Jumpcurrentno + = _intervalnum;
  } _showlable.text = [NSString stringwithformat:@ '%ld ', Jumpcurrentno];
  if (Jumpcurrentno <) {_markedlabel.text = @ "Poor nutrition";
  else if (Jumpcurrentno <=) {_markedlabel.text = @ "Poor nutrition";
  else if (Jumpcurrentno <=) {_markedlabel.text = @ "Nutritious medium";
  else if (Jumpcurrentno <= 650) {_markedlabel.text = @ "Well nourished";
  else if (Jumpcurrentno <=) {_markedlabel.text = @ "Excellent nutrition"; else if (Jumpcurrentno <= 950{_markedlabel.text = @ "Good nutrition";
@end display in the desired current controller:////VIEWCONTROLLER.M//Zldashboard////Created by QTX on 16/9/19. COPYRIGHT©2016 year ZL.
All rights reserved. #import "ViewController.h" #import "ZLDashboardView.h" #import "ZLGradientView.h" #import "Uiview+extensions.h" #def Ine Screen_width ([[UIScreen mainscreen] bounds].size.width) #define SCREEN_HEIGHT ([[UIScreen mainscreen] bounds]. Size.Height) #define Minnumber #define MAXNUMBER 950 @interface Viewcontroller () @property (nonatomic, Strong) ZL

Dashboardview *dashboardview;

@property (nonatomic, Strong) Zlgradientview * Gradientview;

@property (nonatomic, Strong) UIButton * CLICKBTN;

@property (nonatomic, strong) UISlider * slider;

  @end @implementation Viewcontroller-(void) viewdidload {[Super viewdidload];

  Create background color [self setupgradientview];

  Create dashboard [self setupcircleview];

  Add the click button [self Addactionbutton] that triggers the animation;

Change value [self addslidechnagevalue]; }-(void) AddACtionbutton {UIButton *starebutton = [UIButton buttonwithtype:uibuttontypecustom];
  Starebutton.frame = CGRectMake (10.f, Self.dashboardView.bottom + 50.f, SCREEN_WIDTH-20.F, 38.F);
  [Starebutton addtarget:self Action: @selector (Onstarebuttonclick:) forcontrolevents:uicontroleventtouchupinside];
  [Starebutton settitle:@ "Start Animation" forstate:uicontrolstatenormal];
  [Starebutton Setbackgroundcolor:[uicolor Lightgraycolor]];
  StareButton.layer.masksToBounds = YES;
  StareButton.layer.cornerRadius = 4.f;

  [Self.view Addsubview:starebutton];
_CLICKBTN = Starebutton;
  }-(void) Addslidechnagevalue {cgfloat width = 280;
  CGFloat height = 40;
  CGFloat xpixel = (screen_width-width) * 0.5;
  CGFloat ypixel = Cgrectgetmaxy (_clickbtn.frame) + 20;

  CGRect slideframe = CGRectMake (Xpixel, ypixel, width, height);

  UISlider *slider = [[UISlider alloc] initwithframe:slideframe];
  Slider.minimumvalue = Minnumber;

  Slider.maximumvalue = MaxNumber; Slider.minimumtracktintcOlor = [Uicolor colorwithred:0.000 green:1.000 blue:0.502 alpha:1.000];
  Slider.maximumtracktintcolor = [Uicolor colorwithwhite:0.800 alpha:1.000]; /** * Note This attribute: If you do not have a picture of the slider set, that this property will only change the color that has been across a line, will not change the color of the slider, if you set the slider picture, and set this property, then the slider picture will not show that the slider color will change (IOS7) * * [slid
  ER setthumbimage:[uiimage imagenamed:@ ""] forstate:uicontrolstatenormal];


  Slider.thumbtintcolor = [Uicolor Cyancolor];

  [Slider setvalue:0.5 Animated:yes];

  [Slider addtarget:self action: @selector (Slidetap:) forcontrolevents:uicontroleventvaluechanged];

  [Self.view Addsubview:slider];
_slider = slider;
  }-(void) Slidetap: (UISlider *) Sender {CGFloat value = Sender.value;
NSLog (@ "%.F", value);
  }-(void) Setupgradientview {self.gradientview = [[Zlgradientview alloc] initWithFrame:self.view.bounds];
[Self.view AddSubview:self.gradientView]; }-(void) Setupcircleview {self.dashboardview = [[Zldashboardview alloc] Initwithframe:cgrectmake (40.F, 70.F, Screen_w
  IDTH-80.F, SCREEN_WIDTH-80.F)]; SeLf.dashboardView.bgImage = [UIImage imagenamed:@ "BackgroundImage"];
[Self.view AddSubview:self.dashboardView];
    }-(void) Onstarebuttonclick: (UIButton *) Sender {if (sender.selected) {[Self.gradientview Removefromsuperview];
    Self.gradientview = nil;
    [Self.dashboardview Removefromsuperview];

    Self.dashboardview = nil;
    [Self setupgradientview];

    [Self setupcircleview];
    [Self.view BringSubviewToFront:self.clickBtn];
  [Self.view Bringsubviewtofront:_slider];

  } sender.selected = YES;

  CGFloat value = _slider.value;
  NSString *startno = [NSString stringwithformat:@ "%d", minnumber]; NSString *tono = [NSString stringwithformat:@ "%.f", value];//@ "693";
  950 NSLog (@ "endno:%@", Tono);

  [Self.dashboardview Refreshjumpnofromno:startno Tono:tono];
  __block typeof (self) blockself = self; Self.dashboardView.TimerBlock = ^ (Nsinteger index) {[Blockself.gradientview Setupbackgroundcolorwithcolorarrayindex
  : index];
};

 } @end

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.