贝赛尔曲线实现圆形进度条
2016-06-14 10:27
330 查看
引言
在做音频项目的时候,播放音频需要显示圆形进度条。今天,教大家如何简单地实现进度条效果!其实,实现这种效果并不困难。前提是需要了解UIBezierPath。
当然,之前在实现高级动画-圆形树展开、收起动画一文中教了大家如何实现渐变圆形进度条,那是采用mask来实现的。
不过,今天教大家做的效果,并没有使用mask,而是直接使用UIBezierPath来实现。
实现原理
第一步:添加背景灰色圆形圈圈,画笔色为灰色,内容色为透明。如此一来,中间的图片就可以看见了第二步:再添加表示进度的蓝色圆形圈圈,与第一步一样,只是设置画笔颜色为蓝色
第三步:由于bezierpath的圆形起点是M2PI,这与最终的效果不一样,因此需要额外处理一下。所以,将整体的transform旋转-M2PI,这样进度起点就是从12点钟方向开始的了,与效果图一样。但是,整体旋转后,图片就不是正立了,因此需要让图片控件的transform旋转M2PI,这样就是最终的效果了
代码实现
首先,我们需要新建一个HYBCircleProgressView类,这样才能对整体旋转!创建图片:CGRectframe=self.frame; self.layer.cornerRadius=frame.size.width/2; self.layer.masksToBounds=YES; self.imageView=[[UIImageViewalloc] initWithFrame:self.bounds]; [self addSubview:self.imageView];
第一步:添加灰色圆环
首先,创建CAShapeLayer对象,然后生成圆形path,并设置画笔颜色为灰色,线宽(圆环的宽)为2,而内容填充色设置为透明色,然后将此层添加到self.layer上:
self.outLayer=[CAShapeLayerlayer]; CGRectrect={kLineWidth/2,kLineWidth/2, frame.size.width-kLineWidth,frame.size.height-kLineWidth}; UIBezierPath*path=[UIBezierPath bezierPathWithOvalInRect:rect]; self.outLayer.strokeColor=[UIColorlightGrayColor].CGColor; self.outLayer.lineWidth=kLineWidth; self.outLayer.fillColor= [UIColorclearColor].CGColor; self.outLayer.lineCap=kCALineCapRound; self.outLayer.path=path.CGPath; [self.layer addSublayer:self.outLayer];
第二步:添加蓝色进度圆环
这一步与第一步相当,只是修改画笔颜色为蓝色而已。所使用的path与第一步的是一样的:
self.progressLayer=[CAShapeLayerlayer]; self.progressLayer.fillColor=[UIColorclearColor].CGColor; self.progressLayer.strokeColor=[UIColorblueColor].CGColor; self.progressLayer.lineWidth=kLineWidth; self.progressLayer.lineCap=kCALineCapRound; self.progressLayer.path=path.CGPath; [self.layer addSublayer:self.progressLayer];
到这一步,可以看到的效果是这样的:
从效果图可以看到,图片是正立的,但是进度条的起点是从3点钟方向开始的,也就是M2PI开始顺时钟方向变化。可我们希望是从12点钟方向开始顺时钟变化的,那么解决办法就是旋转!看第三步。
第三步:旋转以调整进度起点
将整体旋转-90度,使进度起点为12点钟的位置:self.transform=CGAffineTransformMakeRotation(-M_PI_2);
此时效果是这样的:
图片也跟着旋转了,这不是我们要的效果啊。那么怎么办呢?同样的道理,将图片控件再旋转90度即可:
self.imageView.transform=CGAffineTransformMakeRotation(M_PI_2);
如何动画调整进度
调整这个进度,其中就是调整strokeEnd,这个属性是支持隐式动画的:
-(void)updateProgressWithNumber:(NSUInteger)number{ [CATransactionbegin]; [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]]; [CATransaction setAnimationDuration:0.5]; self.progressLayer.strokeEnd= number/100.0; [CATransactioncommit]; }
转载自: 标哥的技术博客
简书博客地址
https://www.jianshu.com/u/3c7c13f3dc6b
相关文章推荐
- jquery彩色投票进度条简单实例演示
- jquery模拟进度条实现方法
- PHP设置进度条的方法
- jquery实现模拟百分比进度条渐变效果代码
- js ajax加载时的进度条代码
- javascript实现简单的进度条
- js插件YprogressBar实现漂亮的进度条效果
- ajax 异步上传带进度条视频并提取缩略图
- 基于jquery步骤进度条源码分享
- jquery插件NProgress.js制作网页加载进度条
- jQuery实现进度条效果代码
- jQuery简单实现提交数据出现loading进度条的方法
- jquery实现加载进度条提示效果
- jQuery.Uploadify插件实现带进度条的批量上传功能
- jQuery实现页面顶部显示的进度条效果完整实例
- jQuery实现文件上传进度条特效
- jQuery实现简单的文件上传进度条效果
- 自己动手制作基于jQuery的Web页面加载进度条插件
- 分享8款优秀的 jQuery 加载动画和进度条插件
- 自定义刻度jQuery进度条及插件