基于CAShapeLayer和贝塞尔曲线的圆形进度条动画

基于CAShapeLayer和贝塞尔曲线的圆形进度条动画

通过CAShapeLayer和贝塞尔曲线搭配的方法，创建的简单的圆形进度条的教程先简单的介绍下CAShapeLayer1,CAShapeLayer继承自CALayer，可使用CALayer的所有属性2,CAShapeLayer需要和贝塞尔曲线配合使用才有意义。Shape：形状贝塞尔曲线可以为其提供形状，而单独使用CAShapeLayer是没有任何意义的。3,使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形

关于CAShapeLayer和DrawRect的比较DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

贝塞尔曲线与CAShapeLayer的关系1，CAShapeLayer中shape代表形状的意思，所以需要形状才能生效2，贝塞尔曲线可以创建基于矢量的路径3，贝塞尔曲线给CAShapeLayer提供路径，CAShapeLayer在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape4，用于CAShapeLayer的贝塞尔曲线作为Path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线

说完了简介们来看一下如何创建一个简单的圆形进度条

​​//创建全局属性的ShapeLayer​​​​@property​​​​(​​​​nonatomic​​​​, strong) CAShapeLayer *shapeLayer;​​​​- (​​​​void​​​​)viewDidLoad {​​​​[​​​​super​​​​viewDidLoad];​​​​//创建出CAShapeLayer​​​​self​​​​.shapeLayer = [CAShapeLayer layer];​​​​self​​​​.shapeLayer.frame = CGRectMake(0, 0, 200, 200);​​​​//设置shapeLayer的尺寸和位置​​​​self​​​​.shapeLayer.position = ​​​​self​​​​.view.center;​​​​self​​​​.shapeLayer.fillColor = [UIColor clearColor].CGColor;​​​​//填充颜色为ClearColor​​​​//设置线条的宽度和颜色​​​​self​​​​.shapeLayer.lineWidth = 1.0f;​​​​self​​​​.shapeLayer.strokeColor = [UIColor redColor].CGColor;​​​​//创建出圆形贝塞尔曲线​​​​UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];​​​​//让贝塞尔曲线与CAShapeLayer产生联系​​​​self​​​​.shapeLayer.path = circlePath.CGPath;​​​​//添加并显示​​​​[​​​​self​​​​.view.layer addSublayer:​​​​self​​​​.shapeLayer];​​​​}​​

这时候我们运行下能看到会有一个圆​​​​​

现在我们要用到CAShapeLayer的两个参数，strokeEnd和strokeStartStroke:用笔画的意思在这里就是起始笔和结束笔的位置Stroke为1的话就是一整圈，0.5就是半圈，0.25就是1/4圈。以此类推

如果我们把起点设为0，终点设为0.75

//设置stroke起始点​​​​self​​​​.shapeLayer.strokeStart = 0;​​​​self​​​​.shapeLayer.strokeEnd = 0.75;​​

看下运行效果​​​​​

起点和终点我们可以自己控制了，接下来我们在价格定时器，就可以完成我们的圆形进度条了加个全局变量add，这是我们每次的递增量

@interface​​​​ViewController ()​​​​{​​​​double​​​​add;​​​​}​​

再写个定时器

add = 0.1;​​​​//每次递增0.1​​​​//用定时器模拟数值输入的情况​​​​_timer = [​​​​NSTimer​​​​scheduledTimerWithTimeInterval:0.1​​​​target:​​​​self​​​​selector:​​​​@selector​​​​(circleAnimationTypeOne)​​​​userInfo:​​​​nil​​​​repeats:​​​​YES​​​​];​​

定时器每次时间到了执行的函数，这个比较简单就不解释了

​​- (​​​​void​​​​)circleAnimationTypeOne​​​​{​​​​if​​​​(​​​​self​​​​.shapeLayer.strokeEnd > 1 && ​​​​self​​​​.shapeLayer.strokeStart < 1) {​​​​self​​​​.shapeLayer.strokeStart += add;​​​​}​​​​else​​​​if​​​​(​​​​self​​​​.shapeLayer.strokeStart == 0){​​​​self​​​​.shapeLayer.strokeEnd += add;​​​​}​​​​if​​​​(​​​​self​​​​.shapeLayer.strokeEnd == 0) {​​​​self​​​​.shapeLayer.strokeStart = 0;​​​​}​​​​if​​​​(​​​​self​​​​.shapeLayer.strokeStart == ​​​​self​​​​.shapeLayer.strokeEnd) {​​​​self​​​​.shapeLayer.strokeEnd = 0;​​​​}​​​​}​​

再来运行下我们来看看效果​​​​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。