长时间不用CAShapeLayer有些淡忘,正好周末抽时间回顾一下:
1、 先简单的介绍下CAShapeLayer
1、CAShapeLayer继承自CALayer,可使用CALayer的所有属性
2、CAShapeLayer需要和贝塞尔曲线配合使用才有意义。
Shape:形状
贝塞尔曲线可以为其提供形状,而单独使用CAShapeLayer是没有任何意义的。
3、使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形
2、关于CAShapeLayer和DrawRect的比较:
1、DrawRect属于CoreGraphic框架,占用CPU,消耗性能大
2、CAShapeLayer属于CoreAnimation框架,通过GPU来渲染图形,节省性能。动画渲染直接提交给手机GPU,不消耗内存
3、贝塞尔曲线与CAShapeLayer的关系
1、CAShapeLayer中shape代表形状的意思,所以需要形状才能生效
2、贝塞尔曲线可以创建基于矢量的路径
3、贝塞尔曲线给CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染。路径会闭环,所以绘制出了Shape
4、用于CAShapeLayer的贝塞尔曲线作为Path,其path是一个首尾相接的闭环的曲线,即使该贝塞尔曲线不是一个闭环的曲线
说了那么多,下面直接甩代码:
//创建出CAShapeLayer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.frame = CGRectMake(0, 0, 200, 200);//设置shapeLayer的尺寸和位置
shapeLayer.position = self.view.center;
shapeLayer.fillColor = [UIColor clearColor].CGColor;//填充颜色为ClearColor
//设置线条的宽度和颜色
shapeLayer.lineWidth = 1.0f;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
//创建出圆形贝塞尔曲线
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
//让贝塞尔曲线与CAShapeLayer产生联系
shapeLayer.path = circlePath.CGPath;
//添加并显示
[self.view.layer addSublayer:shapeLayer];
/**
上面的结果是一整个圆,现在我们要用到CAShapeLayer的两个参数,strokeEnd和strokeStart
Stroke:用笔画的意思
在这里就是起始笔和结束笔的位置
Stroke为1的话就是一整圈,0.5就是半圈,0.25就是1/4圈。以此类推
如果我们把起点设为0,终点设为0.75
**/
//设置stroke起始点
shapeLayer.strokeStart = 0;
shapeLayer.strokeEnd = 0.75;
/*
下面来加个基础动画玩玩
*/
CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnima.duration = 3.0f;
pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnima.toValue = [NSNumber numberWithFloat:1.0f];
pathAnima.fillMode = kCAFillModeForwards;
pathAnima.removedOnCompletion = NO;
[shapeLayer addAnimation:pathAnima forKey:nil];