IOS使用progssview仿滴滴打车圆形计时

时间:2021-05-20

实现类似在微信中使用的滴滴打车的progressview,实现效果如图

//// 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> /** * 动画开始 */typedef void(^block_progress_start)(); /** * 动画正在进行 * @param NSTimeInterval */typedef void(^block_progress_animing)(NSTimeInterval); /** * 动画结束 */typedef void(^block_progress_stop)(); @interface CCProgressView : UIView{ NSTimeInterval _animationTime;} @property (nonatomic, strong) UILabel *centerLabel; // 中心Label @property (nonatomic, copy) block_progress_start start; // 动画开始回调@property (nonatomic, copy) block_progress_animing animing; // 动画进行@property (nonatomic, copy) block_progress_stop stop; // 动画结束回调 - (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 // 计时器间隔时长#define kAnimTimeInterval 0.1 /** * 圆圈layer上旋转的layer */@interface CCProgressThumb : CALayer{ NSTimeInterval _animationTime;} @property (assign, nonatomic) double startAngle;@property (nonatomic, strong) UILabel *timeLabel; // 显示时间Label @end @implementation CCProgressThumb - (instancetype)init{ if ((self = [super init])) { [self setupLayer]; } return self;} - (void)layoutSublayers{ _timeLabel.frame = self.bounds; [_timeLabel sizeToFit]; _timeLabel.center = CGPointMake(CGRectGetMidX(self.bounds) - _timeLabel.frame.origin.x, CGRectGetMidY(self.bounds) - _timeLabel.frame.origin.y);} - (void)setupLayer{ // 绘制圆 UIGraphicsBeginImageContext(CGSizeMake(kProgressThumbWh, kProgressThumbWh)); CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextSetLineWidth(ctx, 1); CGContextSetFillColorWithColor(ctx, [UIColor lightGrayColor].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 * 100) > 100) { 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获取到一个移动路径 * @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 /** * 圆圈layer */@interface CCProgress : CAShapeLayer{ NSTimeInterval _animationTime;} @property (assign, nonatomic) double initialProgress;@property (nonatomic) NSTimeInterval elapsedTime; //已使用时间@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{ // 绘制圆 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; // 添加可以变动的滚动条 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]; // 添加可以旋转的ThumbLayer self.thumb = [[CCProgressThumb alloc] init]; [self addSublayer:self.thumb];} /** * 得到bezier曲线路劲 * @return */- (CGPathRef)bezierPathWithArcCenter{ CGFloat centerX = CGRectGetWidth(self.frame) / 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 * 100) > 100) { 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];} /** * 时间格式转换 * @param interval NSTimeInterval * @param shortTime BOOL * @return */- (NSString *)stringFromTimeInterval:(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:(CGRect)frame{ 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 = @"已推送至 3 家"; [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 selector:@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 使用实例_progressView = [[CCProgressView alloc] initWithFrame:CGRectMake((APP_WIDTH - 240) / 2.0f, (APP_HEIGHT - 240) / 2.0f, 240, 240)]; [_progressView setAnimationTime:60]; _progressView.start = ^() { NSLog(@"开始"); }; _progressView.animing = ^ (NSTimeInterval currentTime) { NSLog(@"进行中"); }; __block id weakSelf = self; _progressView.stop = ^ () { NSLog(@"结束"); [weakSelf dismiss]; }; [self addSubview:_progressView]; [_progressView startAnimation];

以上所述就是本文的全部内容了,希望大家能够喜欢

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章