iOS 绘制进度条 --新浪 郭大饼
来源:互联网 发布:景安域名备案查询 编辑:程序博客网 时间:2024/04/30 08:41
在Github上看到一些进度条的功能,都是通过Core Graph来实现。无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的。其实使用苹果提供的Core Animation能够非常简单和方便的实现环形进度条效果,而且还可以高效的保证动画效果,无论是前进还是后退(语言水平比较有限,就多用代码说话)。
1、先来一个结果
80%的状态:
99%的状态:
2、需要用到的宏:
- #define
degreesToRadians(x) (M_PI*(x)/180.0) //把角度转换成PI的方式 - #define
PROGREESS_WIDTH 80 //圆直径 - #define
PROGRESS_LINE_WIDTH 4 //弧线的宽度
3、CAShapeLayer
4、UIBezierPath
- UIBezierPath
*path = [UIBezierPath bezierPathWithArcCenter :CGPointMake(40,40) radius :(PROGREESS_WIDTH-PROGRESS_LINE_WIDTH)/2startAngle :degreesToRadians(-210)endAngle :degreesToRadians(30)clockwise :YES];
5、画出一个完成的进度的背景轨道
这里原理很简单,就是使用CAShapeLayer和UIBezierPath结合起来就能够达成目标,这一步的结果如下所示:
- _trackLayer
= [CAShapeLayer layer ];//创建一个trackshape layer - _trackLayer.frame
= self.bounds; - [self.layer
addSublayer :_trackLayer]; - _trackLayer.fillColor
= [[UIColor clearColor ]CGColor ]; -
_trackLayer.strokeColor = [_strokeColor CGColor ];//指定path的渲染颜色 - _trackLayer.opacity
= 0.25;//背景同学你就甘心做背景吧,不要太明显了,透明度小一点 - _trackLayer.lineCap
= //指定线的边缘是圆的kCALineCapRound; - _trackLayer.lineWidth
= //线的宽度PROGRESS_LINE_WIDTH; - UIBezierPath
*path = [UIBezierPath bezierPathWithArcCenter :CGPointMake(40,40) radius :(PROGREESS_WIDTH-PROGRESS_LINE_WIDTH)/2startAngle :degreesToRadians(-210)endAngle :degreesToRadians(30)clockwise :YES];//上面说明过了用来构建圆形 - _trackLayer.path
=[path CGPath ];//把path传递給layer,然后layer会处理相应的渲染,整个逻辑和CoreGraph是一致的。
6、渐变进度条:
首先要明确的需求是,我们需要颜色根据百分比从红色渐变到黄色然后再到蓝色。怎么实现这个颜色的渐变效果。这里我们需要使用到CAGradientLayer,CAGradientLayer是一个用来画颜色渐变的层(如果使用透明的颜色,也就可以做到透明渐变)。我们先用CAGradientLayer做出渐变效果,然后把ShapeLayer作为GradientLayer的Mask来截取出需要的部分,以此达到渐变的进度条效果。
- _progressLayer
= [CAShapeLayer layer]; - _progressLayer.frame
= self.bounds; - _progressLayer.fillColor
= [[UIColor clearColor] CGColor]; - _progressLayer.strokeColor
= [PROCESS_COLOR CGColor]; - _progressLayer.lineCap
= kCALineCapRound; - _progressLayer.lineWidth
= PROGRESS_LINE_WIDTH; - _progressLayer.path
= [path CGPath]; - _progressLayer.strokeEnd
= 0; -
- CALayer
*gradientLayer = [CALayer layer]; - CAGradientLayer
*gradientLayer1 = [CAGradientLayer layer]; - gradientLayer1.frame
= CGRectMake(0,0, self.width/2, self.height); - [gradientLayer1
setColors:[NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[UIColorFromRGB(0xfde802) CGColor], nil]]; - [gradientLayer1
setLocations:@[@0.5,@0.9,@1 ]]; - [gradientLayer1
setStartPoint:CGPointMake(0.5, 1)]; - [gradientLayer1
setEndPoint:CGPointMake(0.5, 0)]; - [gradientLayer
addSublayer:gradientLayer1]; -
- CAGradientLayer
*gradientLayer2 = [CAGradientLayer layer]; - [gradientLayer2
setLocations:@[@0.1,@0.5,@1]]; - gradientLayer2.frame
= CGRectMake(self.width/2,0, self.width/2, self.height); - [gradientLayer2
setColors:[NSArray arrayWithObjects:(id)[UIColorFromRGB(0xfde802) CGColor],(id)[MAIN_BLUE CGColor], nil]]; - [gradientLayer2
setStartPoint:CGPointMake(0.5, 0)]; - [gradientLayer2
setEndPoint:CGPointMake(0.5, 1)]; - [gradientLayer
addSublayer:gradientLayer2]; -
-
-
- [gradientLayer
setMask:_progressLayer]; //用progressLayer来截取渐变层 - [self.layer
addSublayer:gradientLayer];
7、进度条效果
如下代码所示:
- -(void)setPercent:(NSInteger)percent
animated :(BOOL)animated - {
-
[CATransaction begin ]; -
[CATransaction setDisableActions :!animated]; -
[CATransaction setAnimationTimingFuncti :[CAMediaTimingFunctionon functionWithName :kCAMediaTimingFunctionEaseIn]]; -
[CATransaction setAnimationDuration :MAIN_SCREEN_ANIMATION_TIME]; -
_progressLayer.strokeEnd = 100.0;percent/ -
[CATransaction commit ]; -
-
_percent = percent; - }
8、总结
①进度条的百分比是通过CAShapeLayer的strokeEnd属性来实现。
②环形的渐变进度条,通过结合CAShapeLayer和CAGradientLayer实现,注意layer的mask属性的使用。
- iOS 绘制进度条 --新浪 郭大饼
- iOS绘制 - 自定义制作进度条
- iOS 绘制下载进度条progressView
- 绘制进度条
- iOS 通过UIBezierPath和CAShapeLayer绘制圆形进度条
- 自定义圆形进度条,绘制进度条
- 进度条控件的绘制
- JS绘制进度条
- android绘制进度条
- CAShapeLayer绘制环形进度条
- Android 绘制圆形进度条
- Android绘制弧形进度条
- slider进度条 - 绘制圆形
- Android 绘制圆形进度条
- Quartz2D绘制圆形进度条
- canvas绘制圆环进度条
- UIBezierPath绘制进度条
- android 绘制旋转进度条
- Java基础-- IO
- rrayList,Vector, LinkedList的存储性能和特性
- Android控件:RadioButton(单选按钮)
- 23种设计模式全解析
- 揭秘百度核心技术:53位专家纯干货分享
- iOS 绘制进度条 --新浪 郭大饼
- AMS流媒体服务器的搭建
- Java学习笔记--------Java的事件和事件处理接口
- [HDU 1006] Tick and Tick 模拟题
- Python 之ConfigParser
- leetcode 048 —— Anagrams
- linux 出行日记(2)
- C++ auto 与 register、static 关键字 浅析
- linux系统-rpm安装