首先，要知道CAShapeLayer继承自CALayer 可以使用CALayer的所有属性，其次CAShapeLayer需要与贝塞尔曲线使用才有意义，CAShapeLayer可以画出一些想要的图形
注意：一般我们知道view的drawRect可以绘制想要的图形，但是drawRect属于CoreGraphics框架，走的是CPU消耗性能较大。CAShapeLayer属于CoreAnimation框架，将动画渲染提交到GPU，消耗相对较小。
首先解释一下贝塞尔曲线(有兴趣的在看，没看不影响后面的内容理解，可跳过)
这些是我个人理解的如果有不对请指出。
贝塞尔曲线可以有1到多阶的 1阶、2阶、3阶。。。。
最简单的一阶，就是有一个点比如P0，沿着P0到P1这条线段移动的路径就是他的曲线。
一阶贝塞尔曲线.png
二阶是由2个点，比如A1、B1沿着线段P0P1、P1P2开始移动时，两个点所构成的线段A1B1，二阶贝塞尔曲线就是在A1B1这条线变化的线段上移动的路径。就是下图红色的。
二阶贝塞尔曲线.png
实在太难画了....还是找张图吧。。
二阶贝塞尔曲线.gif
三阶就是3个点在三条线段上移动时，这三个点构成的2条变化的线段，在这两条变化的线段上，又有2个点在移动，最后这两个点又构成了一条线段，这条线段上有一个点在移动，这个点移动的路径就是贝塞尔曲线。图自行百度吧。至于后面几阶可以类推得到。
代码部分
// 创建一个矩形贝塞尔曲线
// UIBezierPath *rect = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 250, 150)];
// 创建一个椭圆贝塞尔曲线，要创建一个圆的话，宽高设置成一样的就行了。
// UIBezierPath *oval = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 250, 150)];
UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
// 创建CAShapeLayer
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = CGRectMake(0, 0, 150, 150);
shape.position = self.view.center;
// 图形的填充色
shape.fillColor = [UIColor grayColor].CGColor;
// 这个是背景颜色并不是图形的颜色，而是shape.frame除去图形其他背景部分的颜色。
// shape.backgroundColor = [UIColor redColor].CGColor;
// CAShapeLayer与贝塞尔曲线的关联
shape.path = circle.CGPath;
[self.view.layer addSublayer:shape];
/* 从上面的代码可以看出CAShapeLayer和贝塞尔曲线的frame值并不相同，但是不影响图形的绘画，所以它们的frame互不干扰。
只不过要处理好，我们不能创建的CAShapeLayer的frame小于贝塞尔曲线 因为如果这样只要设置了masksToBounds这个属性会把超出部分截掉。*/
// shape.masksToBounds = YES;
还有StrokeStart和StrokeEnd隐式动画
先将上面代码的CAShapeLayer设成全局的 然后填充颜色设置为clear
再设置下面这些属性，并添加定时器。
self.shape.fillColor = [UIColor clearColor].CGColor;
//线段宽度
self.shape.lineWidth = 1.f;
//线段颜色
self.shape.strokeColor = [UIColor greenColor].CGColor;
//开始位置和结束位置 整个圆是1 注：3点钟方向为0，顺时针
self.shape.strokeStart = 0.25;
self.shape.strokeEnd = 0.5;
[NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(action) userInfo:nil repeats:YES];
- (void)action{
CGFloat a = arc4random() % 100 / 100.f;
CGFloat b = arc4random() % 100 / 100.f;
// 开始值一定要小于结束值
self.shape.strokeStart = a < b ? a : b;
self.shape.strokeEnd = a > b ? a : b;
}
最后有一点，用于CAShapeLayer的贝塞尔曲线作为path，其path是一个首尾相接的闭环曲线即使该贝塞尔曲线不是闭环曲线。
可以尝试用这个写进度条也很方便。
网友评论