贝塞尔曲线与CAShapeLayer简单使用

首先，要知道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是一个首尾相接的闭环曲线即使该贝塞尔曲线不是闭环曲线。

可以尝试用这个写进度条也很方便。

贝塞尔曲线与CAShapeLayer简单使用

推荐阅读更多精彩内容