仿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, , M_PI * , );
    CGContextAddArc(context, RightEyeCenter.x, RightEyeCenter.y, eyeRadius, , M_PI * , );

    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                  = ;

    }
    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 =  * _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<) {
        progress = ;
    }
    if (progress>) {
        progress = ;
    }
    _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(, , , )];
    _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

欢迎加我好友交流，互相学习。