iOS CAShapeLayer

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 这个类就可以达到超神的效果。

图片.png
实现如上图效果，需要创建一个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 绘制出来

图片.png

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];

-绘制进度条

图片.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

Loading动画外篇·圆的不规则变形