CAShapeLayer简单使用

一、CAShapeLayer介绍

• CAShapeLayer继承自CALayer，可使用CALayer的所有属性
• CAShapeLayer需要和贝塞尔曲线配合使用才有意义。贝塞尔曲线可以为其提供形状，而单独使用CAShapeLayer是没有任何意义的。
• 使用CAShapeLayer与贝塞尔曲线可以实现不在view的DrawRect方法中画出一些想要的图形

---

关于CAShapeLayer和DrawRect的比较

• DrawRect：DrawRect属于CoreGraphic框架，占用CPU，消耗性能大
• CAShapeLayer：CAShapeLayer属于CoreAnimation框架，通过GPU来渲染图形，节省性能。动画渲染直接提交给手机GPU，不消耗内存

---

二、CAShapeLayer使用

注：关于贝塞尔曲线，请戳这里 , Demo地址戳这里

1、 实现如下效果

这里写图片描述

首先绘制路径

//路径
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20, 300)];
[path addLineToPoint:CGPointMake(100, 300)];
[path addArcWithCenter:CGPointMake(150, 300) radius:50 startAngle:M_PI endAngle:M_PI*3 clockwise:YES];
[path moveToPoint:CGPointMake(200, 300)];
[path addLineToPoint:CGPointMake(280, 300)];

创建CAShapeLayer对象

CAShapeLayer *layer = [CAShapeLayer layer];
layer.lineWidth = 3;        // 线条宽度
layer.strokeColor = [UIColor redColor].CGColor;     // 线条颜色
layer.strokeStart = 0.0f;         // 开始
layer.strokeEnd = 1.0f;           // 结束
layer.lineJoin = kCALineJoinRound;    // 连接处样式
layer.lineCap = kCALineCapRound;      // 起点终点样式
layer.fillColor = [UIColor clearColor].CGColor;    // 填充色，默认为黑色
[self.view.layer addSublayer:layer];     // 加到view的layer上
layer.path = path.CGPath;      // 贝塞尔路径赋值

可以在此基础上添加动画效果

//添加动画
CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
ani.duration = 3;
ani.repeatCount = HUGE_VALF;
ani.fromValue = [NSNumber numberWithFloat:0.0];
ani.toValue = [NSNumber numberWithFloat:1.0];
[layer addAnimation:ani forKey:@""];

2、实现进度效果

progress

我们这里自定义一个LoadingCircleView;

.h文件

@interface LoadingCircleView : UIView
@property(strong,nonatomic)UIColor *fillColor;    // 填充色
@property(assign,nonatomic)CGFloat progress;    // 进度
@end

.m文件

@interface LoadingCircleView()
{
    UIBezierPath *path;
    CAShapeLayer *layer;
}
@end
@implementation LoadingCircleView

-(void)setProgress:(CGFloat)progress
{
    _progress = progress;
    // 计算应该终点弧度
    CGFloat progressRadian = M_PI*2*self.progress + M_PI*3/2.0;
    
    if (path==nil) {
        path = [UIBezierPath bezierPath];
    }
    // 绘制路径
    [path moveToPoint:CGPointMake(self.bounds.size.width/2.0, self.bounds.size.height/2.0)];
    [path addLineToPoint:CGPointMake(self.bounds.size.width/2.0, 0)];
    [path addArcWithCenter:CGPointMake(self.bounds.size.width/2.0, self.bounds.size.height/2.0) radius:(self.viewWidth-1)/2.0 startAngle:M_PI*3/2.0 endAngle:progressRadian clockwise:YES];
    if (layer==nil) {
        layer = [CAShapeLayer layer];
        layer.fillColor = self.fillColor.CGColor;
    }
    // 将绘制的路径赋值给layer
    layer.path = path.CGPath;
    [self.layer addSublayer:layer]; 
}
// 默认的填充色
-(UIColor *)fillColor{
    if (_fillColor==nil) {
        _fillColor = [UIColor whiteColor];
    }
    return _fillColor;
}
@end

使用

- (void)viewDidLoad {
    [super viewDidLoad];
    self.cicleView = [[LoadingCircleView alloc] initWithFrame:CGRectMake(0, 400, 50, 50)];
    self.cicleView.centerX = self.view.centerX;
    self.cicleView.fillColor = RandColor;
    [self.view addSubview:self.cicleView];
    timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(progress) userInfo:nil repeats:YES];
    [timer setFireDate:[NSDate date]];
}

-(void)progress{
    progress += 0.01;
    self.cicleView.progress = progress;
    if (progress>1) {
        [timer invalidate];
        timer = nil;
        [self.cicleView removeFromSuperview];
    }
}

---

3、更多使用案例

这里写图片描述

CADisplayLink & CAShapeLayer

参考文章地址

Demo地址

---

三、更多参考学习地址

1、CAShapeLayer 进阶地址