贝塞尔曲线与CAShapeLayer简单使用

   <p>首先，要知道CAShapeLayer继承自CALayer 可以使用CALayer的所有属性，其次CAShapeLayer需要与贝塞尔曲线使用才有意义，CAShapeLayer可以画出一些想要的图形</p>    <p>注意：一般我们知道view的drawRect可以绘制想要的图形，但是drawRect属于CoreGraphics框架，走的是CPU消耗性能较大。CAShapeLayer属于CoreAnimation框架，将动画渲染提交到GPU，消耗相对较小。</p>    <p>首先解释一下贝塞尔曲线(有兴趣的在看，没看不影响后面的内容理解，可跳过)</p>    <p>这些是我个人理解的如果有不对请指出。</p>    <p>贝塞尔曲线可以有1到多阶的 1阶、2阶、3阶。。。。</p>    <p>最简单的一阶，就是有一个点比如P0，沿着P0到P1这条线段移动的路径就是他的曲线。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/aa9dd2e9231a4945b7ff75e7a2602c9c.png"></p>    <p style="text-align:center">一阶贝塞尔曲线.png</p>    <p>二阶是由2个点，比如A1、B1沿着线段P0P1、P1P2开始移动时，两个点所构成的线段A1B1，二阶贝塞尔曲线就是在A1B1这条线变化的线段上移动的路径。就是下图红色的。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/814333f0de734846600193da292f25b8.png"></p>    <p style="text-align:center">二阶贝塞尔曲线.png</p>    <p>实在太难画了....还是找张图吧。。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e40165c7c4d059db8c913daecf337d85.gif"></p>    <p style="text-align:center">二阶贝塞尔曲线.gif</p>    <p>三阶就是3个点在三条线段上移动时，这三个点构成的2条变化的线段，在这两条变化的线段上，又有2个点在移动，最后这两个点又构成了一条线段，这条线段上有一个点在移动，这个点移动的路径就是贝塞尔曲线。图自行百度吧。至于后面几阶可以类推得到。</p>    <p>代码部分</p>    <pre>  <code class="language-objectivec">//    创建一个矩形贝塞尔曲线    //    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;</code></pre>    <p>还有StrokeStart和StrokeEnd隐式动画</p>    <p>先将上面代码的CAShapeLayer设成全局的 然后填充颜色设置为clear</p>    <p>再设置下面这些属性，并添加定时器。</p>    <pre>  <code class="language-objectivec">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;    }</code></pre>    <p>最后有一点，用于CAShapeLayer的贝塞尔曲线作为path，其path是一个首尾相接的闭环曲线即使该贝塞尔曲线不是闭环曲线。</p>    <p>可以尝试用这个写进度条也很方便。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/792a728b0a44</p>    <p> </p>