CAShapeLayer介绍
- CAShapeLayer继承自CALayer，可使用CALayer的所有属性
- CAShapeLayer需要和贝塞尔曲线配合使用才有意义。贝塞尔曲线可以为其提供形状，而单独使用CAShapeLayer是没有任何意义的。
- 使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形
关于CAShapeLayer和DrawRect的比较
- DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
- CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存
CAShapeLayer使用
请下载Demo 运行CAShapeLayerDemo 工程
- 绘制特别的形状
CAShapeLayer 有一个神奇的属性 path 用这个属性配合上 UIBezierPath 这个类就可以达到超神的效果。
图1.1
实现如图1.1效果，需要创建一个UIBezierPath曲线，赋值给 CAShapeLayer 的path属性。
实现代码如下 ，图中红点表示 startPoint，endPoint，controlPoint1，controlPoint2，
// 创建 path
UIBezierPath *path = [[UIBezierPath alloc]init];
[path moveToPoint:startPoint];
[path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
// 创建 shapeLayer
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc]init];
[self.view.layer addSublayer:shapeLayer];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.lineWidth = 5;
一些特殊的界面效果，也可以通过CAShapeLayer 绘制出来 如图1.2
图1.2
CGSize finalSize = CGSizeMake(CGRectGetWidth(self.view.frame), 600);
CGFloat layerHeight = finalSize.height * 0.2;
CAShapeLayer *bottomCurveLayer = [[CAShapeLayer alloc]init];
UIBezierPath *path = [[UIBezierPath alloc]init];
[path moveToPoint:CGPointMake(0, finalSize.height - layerHeight)];
[path addLineToPoint:CGPointMake(0, finalSize.height - 1)];
[path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - 1)];
[path addLineToPoint:CGPointMake(finalSize.width, finalSize.height - layerHeight)];
[path addQuadCurveToPoint:CGPointMake(0, finalSize.height - layerHeight) controlPoint:CGPointMake(finalSize.width / 2, (finalSize.height - layerHeight) - 40)];
bottomCurveLayer.path = path.CGPath;
bottomCurveLayer.fillColor = [UIColor orangeColor].CGColor;
[self.view.layer addSublayer:bottomCurveLayer];
-
绘制进度条
屏幕快照 2016-07-28 下午1.12.22.png
创建要展示的四个图层
// 灰色虚线
@property (nonatomic, strong)CAShapeLayer *baseLayer;
// 彩色虚线
@property (nonatomic, strong)CAShapeLayer *shapeLayer;
// 外圈灰色大圆
@property (nonatomic, strong)CAShapeLayer *bigBaseLayer;
// 带颜色的大圆
@property (nonatomic, strong)CAShapeLayer *bigShapeLayer;
设置path 给图层，
- (void)layoutSubviews {
CGPoint center = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
CGFloat radius = MIN(self.bounds.size.width, self.bounds.size.height)/2 - dashLayerMargin;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:- M_PI_2 endAngle: (M_PI * 2)- M_PI_2 clockwise:YES];
CGFloat bigRadius = radius + 8;
UIBezierPath *bigPath = [UIBezierPath bezierPathWithArcCenter:center radius:bigRadius startAngle:- M_PI_2 endAngle: (M_PI * 2)- M_PI_2 clockwise:YES];
self.shapeLayer.path = path.CGPath;
self.baseLayer.path = path.CGPath;
self.bigBaseLayer.path = bigPath.CGPath;
self.bigShapeLayer.path = bigPath.CGPath;
[self createGradientLayer];
}
控制进度 使用 layer的strokeEnd 属性
- (void)setProgress:(CGFloat)progress {
_progress = progress;
self.shapeLayer.strokeEnd = progress;
self.bigShapeLayer.strokeEnd = progress;
}
一些 CAShapeLayer 动画
这些动画都基于CAShapeLayer & UIBezierPath 实现各种形状图层，使用 CoreAnimation显式动画控制图层的变化。
动画实现的关键是将复杂任务拆分成多个可实现的简单任务，然后选择合适的方法实现
收录下面这些动画，可以在需要时为动画实现提供参考，这里不做赘述。，详见Demo中的
CAShapeLayerDemo ，
OneLoadingAnimation ，
ChangeAnimation
EyeRefreshView
drawing
弹簧效果
http://www.jianshu.com/p/ce4e5f226d34
加载动画
http://www.jianshu.com/p/1e2b8ff3519e
切换动画
