前几天用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.o