IOS using Progssview imitation drop cab round chronograph _ios

Source: Internet
Author: User
Tags reserved uikit

To achieve similar progressview used in micro-letters, to achieve the effect as shown

CCProgressView.h//Hurricaneconsumer////Created by Wangcong on 15-3-25. Copyright (c) 2015 Wangcong.
All rights reserved. #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h>/** * Animation started/typedef void (^block_progress_
 
Start) ();
 
/** * Animation is in progress * @param nstimeinterval/typedef void (^block_progress_animing) (nstimeinterval);
 
/** * Animation end/typedef void (^block_progress_stop) ();
 
@interface Ccprogressview:uiview {nstimeinterval _animationtime;}    @property (nonatomic, strong) Uilabel *centerlabel;   Center label @property (nonatomic, copy) block_progress_start start; The animation begins the callback @property (nonatomic, copy) block_progress_animing animing;    Animation for @property (nonatomic, copy) Block_progress_stop stop;
 
Animation End callback-(void) Setanimationtime: (Nstimeinterval) Animationtime;
 
-(void) startanimation;
 
-(void) stopanimation;
@end////CCPROGRESSVIEW.M//Hurricaneconsumer////Created by Wangcong on 15-3-25. Copyright (c) 2015 WaNgcong.
All rights reserved. #import "CCProgressView.h" #define KPROGRESSTHUMBWH 30//Timer interval length #define KANIMTIMEINTERVAL 0.1/** * Circle Layer
 
Rotating Layer/@interface Ccprogressthumb:calayer {nstimeinterval _animationtime;}
@property (assign, nonatomic) double startangle;      @property (nonatomic, strong) Uilabel *timelabel; Display time label @end @implementation Ccprogressthumb-(instancetype) init {if (self = [super init]) {[Self SE
  Tuplayer];
return self;
   
  }-(void) layoutsublayers {_timelabel.frame = self.bounds;
  [_timelabel SizeToFit]; _timelabel.center = Cgpointmake (Cgrectgetmidx (self.bounds)-_timelabel.frame.origin.x, CGRectGetMidY (SE
Lf.bounds)-_TIMELABEL.FRAME.ORIGIN.Y);
  }-(void) Setuplayer {//Draw round Uigraphicsbeginimagecontext (Cgsizemake (KPROGRESSTHUMBWH, KPROGRESSTHUMBWH));
  Cgcontextref CTX = Uigraphicsgetcurrentcontext ();
  Cgcontextsetlinewidth (CTX, 1); Cgcontextsetfillcolorwithcolor (CTX, [UicolorLightgraycolor].
  Cgcolor); Cgcontextsetstrokecolorwithcolor (CTX, [Uicolor Lightgraycolor].
  Cgcolor);
  Cgcontextaddellipseinrect (CTX, CGRectMake (1, 1, kProgressThumbWh-2, kProgressThumbWh-2));
  Cgcontextdrawpath (CTX, Kcgpathfillstroke);
  UIImage *circle = Uigraphicsgetimagefromcurrentimagecontext ();
   
  Uigraphicsendimagecontext ();
  Uiimageview *circleview = [[Uiimageview alloc] initwithimage:circle];
  Circleview.frame = CGRectMake (0, 0, KPROGRESSTHUMBWH, KPROGRESSTHUMBWH);
  Circleview.image = circle;
   
  [Self addSublayer:circleView.layer];
  _timelabel = [[Uilabel alloc] initWithFrame:self.bounds];
  _timelabel.textcolor = [Uicolor Redcolor];
  _timelabel.font = [Uifont systemfontofsize:10];
  _timelabel.textalignment = Nstextalignmentcenter;
  _timelabel.text = @ "00:00";
   
  [Self addsublayer:_timelabel.layer];
_startangle =-M_PI/2;
 
}-(void) Setanimationtime: (nstimeinterval) animationtime {_animationtime = animationtime;} -(double) Calculatepercent: (nstiMeinterval) FromTime ToTime: (nstimeinterval) ToTime {double progress = 0.0f;
    if ((ToTime > 0) && (FromTime > 0)) {progress = Fromtime/totime;
    if (Progress * >) {progress = 1.0f;
} return progress; }-(void) startanimation {cakeyframeanimation *pathanimation = [cakeyframeanimation animationwithkeypath:@ "position"]
  ;
  Pathanimation.calculationmode = kcaanimationpaced;
  Pathanimation.fillmode = Kcafillmodeforwards;
  Pathanimation.removedoncompletion = YES;
  Pathanimation.duration = Kanimtimeinterval;
  Pathanimation.repeatcount = 0;
   
  pathanimation.autoreverses = YES;
  Cgmutablepathref Arcpath = cgpathcreatemutable ();
  Cgpathaddpath (Arcpath, NULL, [self bezierpathfromparentlayerarccenter]);
  Pathanimation.path = Arcpath;
  Cgpathrelease (Arcpath);
[Self addanimation:pathanimation forkey:@ "position"]; /** * Layer to a mobile path * @return * * (cgpathref) bezierpathfromparentlayerarccenter {cgfloat CenterX = CGREctgetwidth (self.superlayer.frame)/2.0;
  CGFloat centery = cgrectgetheight (self.superlayer.frame)/2.0;
  Double tmpstartangle = _startangle;
  _startangle = _startangle + (2 * m_pi) * Kanimtimeinterval/_animatetime;
                   return [Uibezierpath bezierpathwitharccenter:cgpointmake (CenterX, CenterY) Radius:centerx Startangle:tmpstartangle Endangle:_startangle Clockwise:yes].
Cgpath;
 
}-(void) stopanimation {[Self removeallanimations];}
 
-(void) Dealloc {[[Nsnotificationcenter defaultcenter] removeobserver:self];}
 
@end/** * Circle Layer * * @interface ccprogress:cashapelayer {nstimeinterval _animationtime;}
@property (assign, nonatomic) double initialprogress;                   @property (nonatomic) Nstimeinterval elapsedtime;
Used Time @property (assign, nonatomic) double percent;
@property (nonatomic, strong) Uicolor *circlecolor;
@property (nonatomic, strong) Cashapelayer *progress; @propeRty (nonatomic, strong) Ccprogressthumb *thumb;
 
@property (nonatomic, assign) CGRect frame;
  @end @implementation ccprogress-(instancetype) init {if (self = [super init]) {[Self setuplayer];
return self;
  }-(void) layoutsublayers {self.path = [self bezierpathwitharccenter];
   
  Self.progress.path = Self.path;
  Self.thumb.frame = CGRectMake (320-KPROGRESSTHUMBWH)/2.0f, 180, KPROGRESSTHUMBWH, KPROGRESSTHUMBWH);
[Super Layoutsublayers];
  }-(void) Setuplayer {//Draw circle Self.path = [self bezierpathwitharccenter]; Self.fillcolor = [Uicolor Clearcolor].
  Cgcolor; Self.strokecolor = [Uicolor colorwithred:0.86f green:0.86f blue:0.86f alpha:0.4f].
  Cgcolor;
   
  Self.linewidth = 2;
  Add a scrollable bar self.progress = [Cashapelayer layer];
  Self.progress.path = Self.path; Self.progress.fillColor = [Uicolor Clearcolor].
  Cgcolor; Self.progress.strokeColor = [Uicolor Whitecolor].
  Cgcolor;
  Self.progress.lineWidth = 4; Self.progress.lineCap = kcalinecapsqUare;
  Self.progress.lineJoin = Kcalinecapsquare;
   
  [Self addSublayer:self.progress];
  Add thumblayer that can be rotated self.thumb = [[Ccprogressthumb alloc] init];
[Self addSublayer:self.thumb]; /** * Get Bezier Line Strength * @return * * (cgpathref) bezierpathwitharccenter {cgfloat CenterX = cgrectgetwidth (self.fram
  e)/2.0;
  CGFloat centery = cgrectgetheight (self.frame)/2.0;
                   return [Uibezierpath bezierpathwitharccenter:cgpointmake (CenterX, CenterY) Radius:centerx StartAngle: (-M_PI/2) Endangle: (3 * M_PI/2) Clockwise:yes].
Cgpath;
 
}-(void) Setcirclecolor: (Uicolor *) circlecolor {self.progress.strokeColor = Circlecolor.cgcolor;}
  -(void) Setanimtiontime: (nstimeinterval) animtiontime {_animationtime = Animtiontime;
[Self.thumb Setanimationtime:animtiontime]; }-(void) Setelapsedtime: (nstimeinterval) elapsedtime {_initialprogress = [self calculatepercent:_elapsedtime toTime:_ Animationtime];
   
  _elapsedtime = ElapsedTime;
  Self.progress.strokeEnd = self.percent;
[Self startanimation];
  }-(double) percent {_percent = [self calculatepercent:_elapsedtime totime:_animationtime];
return _percent;
  }-(Double) Calculatepercent: (nstimeinterval) FromTime totime: (nstimeinterval) ToTime {double progress = 0.0f;
    if ((ToTime > 0) && (FromTime > 0)) {progress = Fromtime/totime;
    if (Progress * >) {progress = 1.0f;
} return progress;
  }-(void) startanimation {cabasicanimation *pathanimation = [cabasicanimation animationwithkeypath:@ "StrokeEnd"];
  Pathanimation.duration = Kanimtimeinterval;
  Pathanimation.fromvalue = @ (self.initialprogress);
  Pathanimation.tovalue = @ (self.percent);
  Pathanimation.removedoncompletion = YES;
   
  [Self.progress addanimation:pathanimation Forkey:nil];
  [Self.thumb startanimation];
Self.thumb.timeLabel.text = [self stringfromtimeinterval:_elapsedtime shortime:yes]; }
 
-(void) stopanimation {_elapsedtime = 0;
  self.progress.strokeEnd = 0.0;
  [Self removeallanimations];
[Self.thumb stopanimation]; /** * Time Format conversion * @param interval nstimeinterval * @param shorttime BOOL * @return * * (NSString *) Stringfromtimein
  Terval: (nstimeinterval) interval shortime: (BOOL) shorttime {Nsinteger ti = (nsinteger) interval;
  Nsinteger seconds = ti% 60;
  Nsinteger minutes = (ti/60)% 60;
  Nsinteger hours = (ti/3600);
  if (shorttime) {return [NSString stringwithformat:@ "%02ld:%02ld", (long) hours, (long) seconds];
  else {return [nsstring stringwithformat:@ "%02ld:%02ld:%02ld", (long) hours, (long) minutes, (long) seconds];
} @end @interface Ccprogressview () @property (nonatomic, strong) ccprogress *progresslayer;
 
@property (nonatomic, strong) Nstimer *timer;
  @end @implementation Ccprogressview-(instancetype) init {if (self = [super init]) {[Self setupview];
return self; }-(Instancetype) initWithFrame: (CGRectFrame {if (self = [Super Initwithframe:frame]) {[Self setupview];
return self;
  }-(void) layoutsubviews {[Super layoutsubviews];
   
  Self.progressLayer.frame = Self.bounds;
  [Self.centerlabel SizeToFit];
Self.centerLabel.center = Cgpointmake (self.center.x-self.frame.origin.x, SELF.CENTER.Y-SELF.FRAME.ORIGIN.Y);
  }-(void) Setupview {self.backgroundcolor = [uicolor Clearcolor];
   
  Self.clipstobounds = false;
  Self.progresslayer = [[Ccprogress alloc] init];
  Self.progressLayer.frame = Self.bounds;
   
  [Self.layer AddSublayer:self.progressLayer];
  _centerlabel = [[Uilabel alloc] initWithFrame:self.bounds];
  _centerlabel.font = [Uifont systemfontofsize:18];
  _centerlabel.textalignment = Nstextalignmentcenter;
  _centerlabel.textcolor = [Uicolor Whitecolor];
  _centerlabel.text = @ "has been pushed to 3 home";
[Self.layer Addsublayer:_centerlabel.layer];
  }-(void) Setanimationtime: (nstimeinterval) animationtime {_animationtime = Animationtime; [Self.progresSlayer Setanimtiontime:animationtime]; }-(void) Startanimation {if (!_timer) {_timer = [nstimer timerwithtimeinterval:kanimtimeinterval target:self SE
    Lector: @selector (dotimerschedule) Userinfo:nil Repeats:yes];
  [[Nsrunloop Currentrunloop] Addtimer:_timer formode:nsrunloopcommonmodes];
  } self.progressLayer.elapsedTime = 0;
if (_start) _start ();
  }-(void) Dotimerschedule {self.progressLayer.elapsedTime = self.progressLayer.elapsedTime + kanimtimeinterval;;
   
  if (_animing) _animing (self.progressLayer.elapsedTime);
  if (self.progressLayer.elapsedTime >= _animationtime) {[Self stopanimation];
  }}-(void) StopAnimation {if (_stop) _stop ();
    if (_timer) {[_timer invalidate];
  _timer = nil;
} [_progresslayer stopanimation]; @end Use instance _progressview = [[Ccprogressview alloc] Initwithframe:cgrectmake (app_width-240)/2.0f, (app_height-2
  )/2.0f, 240, 240)];
  [_progressview setanimationtime:60];
_progressview.start = ^ () {    NSLog (@ "start");
  };
  _progressview.animing = ^ (Nstimeinterval currenttime) {NSLog (@ "in progress");
  };
  __block id weakself = self;
    _progressview.stop = ^ () {NSLog (@ "End");
  [Weakself dismiss];
  };
   
  [Self addsubview:_progressview];
 [_progressview startanimation];

The above is the entire contents of this article, I hope you can enjoy

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.