CAShapeLayer 使用

基本使用

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(110, 100, 150, 100)];
CAShapeLayer *layer = [CAShapeLayer new];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:layer];

屏幕快照 2018-01-05 下午4.36.02.png

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 100, 350, 100) cornerRadius:50];

屏幕快照 2018-01-05 下午4.39.28.png

UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:50 startAngle:0 endAngle:M_PI clockwise:YES];

bezierPathWithArcCenter 圆心
radius 半径
startAngle 起始角
endAngle 结束角
clockwise 是否是顺时针

屏幕快照 2018-01-05 下午4.44.06.png 屏幕快照 2018-01-05 下午4.43.48.png

贝塞尔曲线

屏幕快照 2018-01-05 下午4.50.36.png

由起点、终点、控制点三个参数来画

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 300)];
[path addQuadCurveToPoint:CGPointMake(300, 300) controlPoint:CGPointMake(170, 200)];

屏幕快照 2018-01-05 下午4.55.20.png

可以添加两个控制点

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 300)];
[path addCurveToPoint:CGPointMake(300, 300) controlPoint1:CGPointMake(170, 200) controlPoint2:CGPointMake(170, 400)];

屏幕快照 2018-01-05 下午4.57.22.png

进度

主要用了strokeStart, strokeEnd, lineWidth三个属性，都可以做动画

进度条

pr.gif

    UIView *shapeLayerContainer = [[UIView alloc] initWithFrame:CGRectMake(30, 100, 350, 50)];
    shapeLayerContainer.clipsToBounds = YES;
    shapeLayerContainer.layer.cornerRadius = 25;
    [self.view addSubview:shapeLayerContainer];
    shapeLayerContainer.backgroundColor = [UIColor clearColor];
    shapeLayerContainer.layer.borderWidth = 1;
    shapeLayerContainer.layer.borderColor = [UIColor blueColor].CGColor;
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    [shapeLayerContainer.layer addSublayer:shapeLayer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.lineWidth = 50;
    shapeLayer.strokeStart = 0;
    shapeLayer.strokeEnd = 0;
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(0, 25)];
    [bezierPath addLineToPoint:CGPointMake(350, 25)];
    shapeLayer.path = bezierPath.CGPath;

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        if (self) {
            [CATransaction begin];
            [CATransaction setAnimationDuration:2];
            shapeLayer.strokeEnd = 0.8;
            [CATransaction commit];
        }
    });

再举个栗子

p.gif

    UIView *shapeLayerContainer = [[UIView alloc] initWithFrame:CGRectMake(30, 100, 350, 50)];
    shapeLayerContainer.clipsToBounds = YES;
    shapeLayerContainer.layer.cornerRadius = 25;
    [self.view addSubview:shapeLayerContainer];
    shapeLayerContainer.backgroundColor = [UIColor clearColor];
    shapeLayerContainer.layer.borderWidth = 1;
    shapeLayerContainer.layer.borderColor = [UIColor blueColor].CGColor;
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    [shapeLayerContainer.layer addSublayer:shapeLayer];
    shapeLayer.strokeColor = [UIColor redColor].CGColor;
    shapeLayer.lineWidth = 50;
    shapeLayer.strokeStart = 0.5;
    shapeLayer.strokeEnd = 0.5;
    
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(0, 25)];
    [bezierPath addLineToPoint:CGPointMake(350, 25)];
    shapeLayer.path = bezierPath.CGPath;

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        if (self) {
            [CATransaction begin];
            [CATransaction setAnimationDuration:2];
            shapeLayer.strokeStart = 0;
            shapeLayer.strokeEnd = 1;
            shapeLayer.lineWidth = 50;
            [CATransaction commit];
        }
    });

圆形进度条

circ.gif

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:self.view.center radius:50 startAngle:-M_PI/2 endAngle:M_PI*3/2 clockwise:YES];
    CAShapeLayer *layer = [CAShapeLayer new];
    layer.path = path.CGPath;
    layer.strokeEnd = 0;
    layer.strokeStart = 0;
    layer.lineWidth = 5;
    layer.lineCap = kCALineCapRound;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        if (self) {
            [CATransaction begin];
            [CATransaction setAnimationDuration:4];
            layer.strokeEnd = 1;
            [CATransaction commit];
        }
    });