首先,要知道CAShapeLayer继承自CALayer 可以使用CALayer的所有属性,其次CAShapeLayer需要与贝塞尔曲线使用才有意义,CAShapeLayer可以画出一些想要的图形
注意:一般我们知道view的drawRect可以绘制想要的图形,但是drawRect属于CoreGraphics框架,走的是CPU消耗性能较大。CAShapeLayer属于CoreAnimation框架,将动画渲染提交到GPU,消耗相对较小。
首先解释一下贝塞尔曲线(有兴趣的在看,没看不影响后面的内容理解,可跳过)
这些是我个人理解的如果有不对请指出。
贝塞尔曲线可以有1到多阶的 1阶、2阶、3阶。。。。
最简单的一阶,就是有一个点比如P0,沿着P0到P1这条线段移动的路径就是他的曲线。
二阶是由2个点,比如A1、B1沿着线段P0P1、P1P2开始移动时,两个点所构成的线段A1B1,二阶贝塞尔曲线就是在A1B1这条线变化的线段上移动的路径。就是下图红色的。
实在太难画了....还是找张图吧。。
三阶就是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是一个首尾相接的闭环曲线即使该贝塞尔曲线不是闭环曲线。
可以尝试用这个写进度条也很方便。