仿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
欢迎加我好友交流,互相学习。
仿UC浏览器图片加载进度条的更多相关文章
- react封装简单的浏览器顶部加载进度条全局组件
在项目中经常会有在请求前后加loading或者加加载进度条,一般这些组件都会抽离出来作为全局组件 进度条的插件貌似都不是很符合自己项目中的需求,于是.. 参考nprogress样式,自己在项目中封装组 ...
- ios的uc浏览器图片加载不出来原因
最近做一个落地页发现一个在ios设备上uc浏览器的bug 在uc浏览器开启广告过滤的时候,会把图片过滤掉,无论是背景图还是img标签加载的图片 经过搜索与实验,发现广告过滤的设置关掉就可以,可是一般情 ...
- js实现页面图片加载进度条
//html <div id="loading" class="loading"> <div class="load"&g ...
- css3 linear-gradient实现页面加载进度条效果
最终效果图: html结构: <div> <p class="p1"> <span></span> < ...
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 混合开发(一)——WebView开发高级技巧之加载网页以及JavaScript,加载进度条
混合开发(一)--WebView开发高级技巧之加载网页以及JavaScript,加载进度条 现在关于混合开发也越来越多了,很多人喜欢跟随,比如HB,比如RN,其实这东西很早就有这么一个概念了,而且说实 ...
- Unity3D 场景切换加载进度条实现
需要三个场景,场景A,场景B,场景C: 场景A:一个按钮,点击加载场景B: 场景B:从A切换到C过度场景,加载进度条: 场景C:目标场景: 创建OnProgress.cs脚本: using Syste ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- iOS WKWebView 加载进度条、导航栏返回&关闭 (Swift 4)
导航: 1.加载进度条 2.导航栏增加返回.关闭按钮 加载进度条 效果图 代码如下: self.progressView.trackTintColor = UIColor.white self.pro ...
随机推荐
- [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 ...
- Spark系列(十)TaskSchedule工作原理
工作原理图 源码分析: 1.) 25 launchedTask = true 26 } 27 } catch { 28 ...
- 虚拟化技术对比:Xen vs KVM
恒天云:http://www.hengtianyun.com/download-show-id-68.html 一.说明 本文主要从功能方面和性能方面对Xen和KVM对比分析,分析出其优缺点指导我们恒 ...
- linux下改变文件的字符编码
首先确定文件的原始字符编码: $ file -bi test.txt 然后用 iconv 转换字符编码 $ iconv -f from-encoding -t to-encoding file > ...
- MySQL存储过程权限分析
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://huanghualiang.blog.51cto.com/6782683/1216 ...
- hdu5909-Tree Cutting(树形dp)
偷偷抄bestcoser上面hnust_zhaozhixuan的代码 = = 因为题解看不懂阿 #include <cstdio> #include <cstring> typ ...
- sass学习(1)——了解sass
为什么要选择sass 我们在手写css中,会遇到很多很麻烦的问题.倒不是一些技术的问题,而是工程量的问题.例如,如何可以代替难记的16进制颜色,如何可以让层次更清晰,还有重复的代码该如何偷懒.其实这一 ...
- 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 ...
- Spring EL hello world example
The Spring EL is similar with OGNL and JSF EL, and evaluated or executed during the bean creation ti ...
- java多线程中的volatile和synchronized
package com.chzhao; public class Volatiletest extends Thread { private static int count = 0; public ...