初次接触CAShapeLayer和贝塞尔曲线，看了下极客学院的视频。对初学者来说感觉还不错。今天来说一个通过CAShapeLayer和贝塞尔曲线搭配的方法，创建的简单的圆形进度条的教程
先简单的介绍下CAShapeLayer
1,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在提供的路径中进行渲染。路径会闭环，所以绘制出了Shape
4，用于CAShapeLayer的贝塞尔曲线作为Path，其path是一个首尾相接的闭环的曲线，即使该贝塞尔曲线不是一个闭环的曲线
说完了简介们来看一下如何创建一个简单的圆形进度条
|
1
2
|
//创建全局属性的ShapeLayer@property (nonatomic, strong) CAShapeLayer *shapeLayer;
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
- (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和strokeStart
Stroke:用笔画的意思
在这里就是起始笔和结束笔的位置
Stroke为1的话就是一整圈，0.5就是半圈，0.25就是1/4圈。以此类推
如果我们把起点设为0，终点设为0.75
|
1
2
3
|
//设置stroke起始点self.shapeLayer.strokeStart = 0;
self.shapeLayer.strokeEnd = 0.75;
|
看下运行效果
起点和终点我们可以自己控制了，接下来我们在价格定时器，就可以完成我们的圆形进度条了
加个全局变量add，这是我们每次的递增量
|
1
2
3
4
|
@interface ViewController ()
{ double add;
} |
再写个定时器
|
1
2
3
4
5
6
7
|
add = 0.1;//每次递增0.1
//用定时器模拟数值输入的情况 _timer = [NSTimer scheduledTimerWithTimeInterval:0.1
target:self
selector:@selector(circleAnimationTypeOne)
userInfo:nil
repeats:YES];
|
定时器每次时间到了执行的函数，这个比较简单就不解释了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
- (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;
}
} |
再来运行下我们来看看效果
奉上Demo，供大家参考。
CircleAnimationTest