仿UC瀏覽器圖片載入進度條，仿uc瀏覽器進度條

仿UC瀏覽器圖片載入進度條，仿uc瀏覽器進度條

前幾天用UC瀏覽器看新聞（無意中給UC打了廣告），看到它的圖片載入進度條，正好最近有時間，所以就自己寫了一個。

如下

進度條的底色和填充顏色都可以調整。

首先中間的笑臉作為一個整體，其實現代碼如下：

#import "FaceView.h"@implementation FaceView- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.backgroundColor = [UIColor clearColor];    }    return self;}- (void)drawRect:(CGRect)rect{    CGFloat width = rect.size.width;    CGFloat height = rect.size.height;    CGContextRef context=UIGraphicsGetCurrentContext();    //眼睛    CGFloat eyeRadius = width * 0.1;    CGFloat factor_eyeX = 0.3;    CGFloat factor_eyeY = 0.2;    CGPoint leftEyeCenter = CGPointMake(width * factor_eyeX, height * factor_eyeY);    CGPoint RightEyeCenter = CGPointMake(width - width * factor_eyeX, height * factor_eyeY);    CGContextAddArc(context, leftEyeCenter.x, leftEyeCenter.y, eyeRadius, 0, M_PI * 2, 0);    CGContextAddArc(context, RightEyeCenter.x, RightEyeCenter.y, eyeRadius, 0, M_PI * 2, 0);        if (_faceColor) {        [_faceColor set];    }        CGContextDrawPath(context, kCGPathFill);    //嘴    CGFloat factor_pX = 0.15;    CGFloat factor_pY = 0.6;        CGFloat factor_cX = 0.5;    CGFloat factor_cY = 0.8;        CGPoint startPoint = CGPointMake(width * factor_pX, height * factor_pY);    CGPoint endPoint = CGPointMake(width - width * factor_pX, height * factor_pY);    CGPoint controlPoint = CGPointMake(width * factor_cX, height * factor_cY);    //貝茲路徑    CGContextMoveToPoint(context, startPoint.x, startPoint.y);    CGContextAddQuadCurveToPoint(context, controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);    CGContextSetLineWidth(context, 2.0);    CGContextDrawPath(context, kCGPathStroke);}- (void)setFaceColor:(UIColor *)faceColor{    _faceColor = faceColor;    [self setNeedsDisplay];}- (void)dealloc{    LogFunc;;}

接下來就是路徑的繪製代碼如下：

#define RGBColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]#define grayColor  RGBColor(138, 138, 138)#import "YXProgressView.h"#import "FaceView.h"@interface YXProgressView ()@property (nonatomic,assign) CGFloat rectRadius;@property (nonatomic,assign) CGFloat lineWidth;@property (nonatomic,assign) CGFloat myFaceViewInset;@property (nonatomic,strong) CAShapeLayer *progressLayer;@property (nonatomic,strong) CAShapeLayer *outLayer;@property (nonatomic,strong) FaceView *myFaceView;@property (nonatomic,strong) NSTimer  *animatedTimer;@property (nonatomic,assign) NSTimeInterval timeInterval;@end@implementation YXProgressView- (instancetype)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.backgroundColor      = [UIColor clearColor];        self.isAnimated           = YES;        self.actionLineColor      = [UIColor whiteColor];        self.fixedLineColor       =  grayColor;                CGFloat width             = frame.size.width;        self.myFaceViewInset      = width * 0.15;        self.rectRadius           = width * 0.2;        self.lineWidth            = 3.0;        self.timeInterval         = 2.0;                self.myFaceView           = [FaceView new];        self.myFaceView.faceColor = self.fixedLineColor;        [self addSubview:self.myFaceView];                self.outLayer             = [CAShapeLayer layer];        UIBezierPath *path        = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:self.rectRadius];        self.outLayer.strokeColor = self.fixedLineColor.CGColor;        self.outLayer.lineWidth   = _lineWidth;        self.outLayer.fillColor   =  [UIColor clearColor].CGColor;        self.outLayer.lineCap     = kCALineCapRound;        self.outLayer.path        = path.CGPath;        [self.layer addSublayer:self.outLayer];                self.progressLayer        = [CAShapeLayer layer];        self.progressLayer.frame  = self.bounds;        self.progressLayer.fillColor   = [UIColor clearColor].CGColor;        self.progressLayer.strokeColor = self.actionLineColor.CGColor;        self.progressLayer.lineWidth   = _lineWidth;        self.progressLayer.lineCap     = kCALineCapRound;        self.progressLayer.path        = path.CGPath;        [self.layer addSublayer:_progressLayer];                self.progress                  = 0;                   }    return self;}- (void)willMoveToSuperview:(UIView *)newSuperview{    if (self.isAnimated) {        _animatedTimer = [NSTimer scheduledTimerWithTimeInterval:_timeInterval target:self selector:@selector(animation) userInfo:nil repeats:YES];        [_animatedTimer fire];        [[NSRunLoop mainRunLoop] addTimer:_animatedTimer forMode:NSRunLoopCommonModes];    }    }- (void)removeFromSuperview{    [super removeFromSuperview];    [_animatedTimer invalidate];    _animatedTimer = nil;    LogFunc;}- (void)dealloc{    LogFunc;}- (void)animation{     __weak typeof(self) weakSelf = self;    CGRect tempF = weakSelf.myFaceView.frame;    tempF.origin.y = 2 * _myFaceViewInset - _myFaceViewInset * 0.5;    [UIView animateWithDuration:weakSelf.timeInterval * 0.5 animations:^{        weakSelf.myFaceView.frame = tempF;    } completion:^(BOOL finished) {        CGRect tempF_= weakSelf.myFaceView.frame;        tempF_.origin.y = weakSelf.myFaceViewInset * 0.5;        [UIView animateWithDuration:weakSelf.timeInterval * 0.5 animations:^{            weakSelf.myFaceView.frame = tempF_;        }];            }];}- (void)setActionLineColor:(UIColor *)actionLineColor{    _actionLineColor = actionLineColor;    self.progressLayer.strokeColor = self.actionLineColor.CGColor;}- (void)setFixedLineColor:(UIColor *)fixedLineColor{    _fixedLineColor = fixedLineColor;    self.outLayer.strokeColor = self.fixedLineColor.CGColor;}- (void)setProgress:(CGFloat)progress{    if (progress<0) {        progress = 0;    }    if (progress>1) {        progress = 1;    }    _progress = progress;    self.progressLayer.strokeEnd = progress;}- (void)layoutSubviews{    [super layoutSubviews];    _myFaceView.frame = CGRectInset(self.bounds, _myFaceViewInset, _myFaceViewInset);}

我把源碼上傳到了GitHub，大家下載之後可以直接使用，非常方便。地址在這 https://github.com/CoderPaulYin/YXProgressView.git

基本的使用舉例：

 _myProgressView = [[YXProgressView alloc] initWithFrame:CGRectMake(0, 100, 80, 80)];    _myProgressView.centerX = self.view.centerX;    _myProgressView.actionLineColor = [UIColor greenColor];//設定進度條的填充顏色，也可以設定其他顏色    [self.view addSubview:_myProgressView];

然後在其他需要更新進度的地方：

- (void)sliderValueChanged:(UISlider *)sender{    NSLog(@"%f",sender.value);    _myProgressView.progress = sender.value;}

我的QQ：82154139  GitHub:  https://github.com/CoderPaulYin   

 歡迎加我好友交流，互相學習。