IOS使用progssview仿滴滴打車圓形計(jì)時(shí)
更新時(shí)間:2015年07月31日 10:25:52 投稿:hebedich
本文給大家分享的是IOS中實(shí)現(xiàn)仿滴滴打車的原型計(jì)時(shí)效果,非常的實(shí)用,有需要的小伙伴可以參考下。
實(shí)現(xiàn)類似在微信中使用的滴滴打車的progressview,實(shí)現(xiàn)效果如圖
// // 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> /** * 動(dòng)畫開始 */ typedef void(^block_progress_start)(); /** * 動(dòng)畫正在進(jìn)行 * @param NSTimeInterval */ typedef void(^block_progress_animing)(NSTimeInterval); /** * 動(dòng)畫結(jié)束 */ typedef void(^block_progress_stop)(); @interface CCProgressView : UIView { NSTimeInterval _animationTime; } @property (nonatomic, strong) UILabel *centerLabel; // 中心Label @property (nonatomic, copy) block_progress_start start; // 動(dòng)畫開始回調(diào) @property (nonatomic, copy) block_progress_animing animing; // 動(dòng)畫進(jìn)行 @property (nonatomic, copy) block_progress_stop stop; // 動(dòng)畫結(jié)束回調(diào) - (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 // 計(jì)時(shí)器間隔時(shí)長(zhǎng) #define kAnimTimeInterval 0.1 /** * 圓圈layer上旋轉(zhuǎn)的layer */ @interface CCProgressThumb : CALayer { NSTimeInterval _animationTime; } @property (assign, nonatomic) double startAngle; @property (nonatomic, strong) UILabel *timeLabel; // 顯示時(shí)間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"]; } /** * 根據(jù)父Layer獲取到一個(gè)移動(dòng)路徑 * @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; //已使用時(shí)間 @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; // 添加可以變動(dòng)的滾動(dòng)條 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]; // 添加可以旋轉(zhuǎn)的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]; } /** * 時(shí)間格式轉(zhuǎn)換 * @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 使用實(shí)例 _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(@"進(jìn)行中"); }; __block id weakSelf = self; _progressView.stop = ^ () { NSLog(@"結(jié)束"); [weakSelf dismiss]; }; [self addSubview:_progressView]; [_progressView startAnimation];
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡
相關(guān)文章
IOS實(shí)現(xiàn)視頻動(dòng)畫效果的啟動(dòng)圖
這篇文章實(shí)現(xiàn)的是一個(gè)關(guān)于啟動(dòng)頁(yè)或者引導(dǎo)頁(yè)的視頻動(dòng)畫效果的實(shí)現(xiàn)過(guò)程,對(duì)于大家開發(fā)APP具有一定的參考借鑒價(jià)值,有需要的可以來(lái)看看。2016-09-09iOS實(shí)現(xiàn)淘寶上拉進(jìn)入詳情頁(yè)交互效果
最近遇到一個(gè)項(xiàng)目,項(xiàng)目中某個(gè)新需求的交互要求仿照淘寶上拉從下往上彈出寶貝詳情。所以死打開淘寶APP仔細(xì)看了看,然后自己寫了寫,現(xiàn)在感覺效果差不多了,記錄一下分享給大家,方法自己和大家需要的時(shí)候查看借鑒,感興趣的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2016-11-11iOS開發(fā)中使用FMDB來(lái)使程序連接SQLite數(shù)據(jù)庫(kù)
這篇文章主要介紹了iOS開發(fā)中使用FMDB來(lái)使程序連接SQLite數(shù)據(jù)庫(kù),SQLite是一個(gè)簡(jiǎn)單的嵌入式數(shù)據(jù)庫(kù),非常適合輕量級(jí)使用,需要的朋友可以參考下2015-11-11