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

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

仿UC浏览器图片加载进度条的更多相关文章

  1. react封装简单的浏览器顶部加载进度条全局组件

    在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...

  2. ios的uc浏览器图片加载不出来原因

    最近做一个落地页发现一个在ios设备上uc浏览器的bug 在uc浏览器开启广告过滤的时候,会把图片过滤掉,无论是背景图还是img标签加载的图片 经过搜索与实验,发现广告过滤的设置关掉就可以,可是一般情 ...

  3. js实现页面图片加载进度条

    //html <div id="loading" class="loading"> <div class="load"&g ...

  4. css3 linear-gradient实现页面加载进度条效果

    最终效果图: html结构: <div>    <p class="p1">        <span></span>    < ...

  5. 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画

    之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...

  6. 混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条

    混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...

  7. Unity3D 场景切换加载进度条实现

    需要三个场景,场景A,场景B,场景C: 场景A:一个按钮,点击加载场景B: 场景B:从A切换到C过度场景,加载进度条: 场景C:目标场景: 创建OnProgress.cs脚本: using Syste ...

  8. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  9. iOS WKWebView 加载进度条、导航栏返回&关闭 (Swift 4)

    导航: 1.加载进度条 2.导航栏增加返回.关闭按钮 加载进度条 效果图 代码如下: self.progressView.trackTintColor = UIColor.white self.pro ...

随机推荐

  1. [HIve - LanguageManual] Sort/Distribute/Cluster/Order By

    Syntax of Order By Syntax of Sort By Difference between Sort By and Order By Setting Types for Sort ...

  2. Spark系列(十)TaskSchedule工作原理

    工作原理图 源码分析: 1.) 25              launchedTask = true 26            } 27          } catch { 28         ...

  3. 虚拟化技术对比:Xen vs KVM

    恒天云:http://www.hengtianyun.com/download-show-id-68.html 一.说明 本文主要从功能方面和性能方面对Xen和KVM对比分析,分析出其优缺点指导我们恒 ...

  4. linux下改变文件的字符编码

    首先确定文件的原始字符编码: $ file -bi test.txt 然后用 iconv 转换字符编码 $ iconv -f from-encoding -t to-encoding file > ...

  5. MySQL存储过程权限分析

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://huanghualiang.blog.51cto.com/6782683/1216 ...

  6. hdu5909-Tree Cutting(树形dp)

    偷偷抄bestcoser上面hnust_zhaozhixuan的代码 = = 因为题解看不懂阿 #include <cstdio> #include <cstring> typ ...

  7. sass学习(1)——了解sass

    为什么要选择sass 我们在手写css中,会遇到很多很麻烦的问题.倒不是一些技术的问题,而是工程量的问题.例如,如何可以代替难记的16进制颜色,如何可以让层次更清晰,还有重复的代码该如何偷懒.其实这一 ...

  8. Spring Auto-Wiring Beans with @Autowired annotation

    In last Spring auto-wiring in XML example, it will autowired the matched property of any bean in cur ...

  9. Spring EL hello world example

    The Spring EL is similar with OGNL and JSF EL, and evaluated or executed during the bean creation ti ...

  10. java多线程中的volatile和synchronized

    package com.chzhao; public class Volatiletest extends Thread { private static int count = 0; public ...