CAShapeLayer与UIBezierPath

CAShapeLayer 是 CALayer 的子类，但是比 CALayer 更灵活，可以画出各种图形。
我经常将 CAShapeLayer 与UIView的 drawRect 方法混淆，因为他们都能绘制出各式各样的图形。通过NSTimer或者CADisplaylink，他们也都能显示动画效果。
现在想想，他们至少有一个重大区别：drawRect方法，是在第一次渲染或重新渲染(setNeedsDisplay)

概述

1.CAShapeLayer比CALayer多了哪些属性
2.贝塞尔曲线-Bezier
3.添加动画
4.水波纹

1.CAShapeLayer比CALayer多了哪些属性

最关键的是多了一个 path。使用它配合 UIBezierPath 该layer就可以达到神奇的效果。
demo

demo.png

- (void)shapeLayerTest {
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.frame = CGRectMake(40, 100, 80, 50);
    layer.borderColor = [UIColor blackColor].CGColor;
    layer.borderWidth = 1.f;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(5, 5, 70, 40)];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor redColor].CGColor;
    
    [self.view.layer addSublayer:layer];
}

所有属性

// 定义要渲染的形状的路径.
@property(nullable) CGPathRef path;

// 填充 path 的颜色
@property(nullable) CGColorRef fillColor;

// 当填充填充路径(fill path)时使用。规则选项是“非零'和`偶-奇。默认“非零。
@property(copy) NSString *fillRule;

// 填充路径的描边轮廓的颜色
@property(nullable) CGColorRef strokeColor;

// 用来绘制抚摸轮廓的路径的子区域.。该值必须在范围[0,1] 0代表路径的开始和结束
@property CGFloat strokeStart;
@property CGFloat strokeEnd;

// The line width used when stroking the path. Defaults to one.
@property CGFloat lineWidth;

// The miter limit used when stroking the path. Defaults to ten.
@property CGFloat miterLimit;

@property(copy) NSString *lineCap;
@property(copy) NSString *lineJoin;

//
@property CGFloat lineDashPhase;
@property(nullable, copy) NSArray *lineDashPattern;

2.贝塞尔曲线-Bezier

贝塞尔曲线.png

- (void)quadCurve {
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    layer.frame = CGRectMake(20, 100, ScreenW, ScreenH);
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 50)];
    [path addQuadCurveToPoint:CGPointMake(100, 50) controlPoint:CGPointMake(40, 20)];
    
    [path moveToPoint:CGPointMake(110, 50)];
    [path addCurveToPoint:CGPointMake(200, 50) controlPoint1:CGPointMake(140, 20) controlPoint2:CGPointMake(180, 80)];
    
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor redColor].CGColor;
    
    [self.view.layer addSublayer:layer];
}

3.添加动画

CAShapeLayer中有很多能进行动画的属性：strokeStart、strokeEnd、lineWidth、miterLimit、lineDashPhase。

动画1.gif

- (void)animate1WithLayer:(CALayer *)layer {
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0);
    animation.toValue = @(1);
    animation.duration = 2;
    [layer addAnimation:animation forKey:@""];
}

动画2.gif

- (void)animate2WithLayer:(CAShapeLayer *)layer {
    layer.strokeStart = 0.5;
    layer.strokeEnd = 0.5;
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    animation.fromValue = @(0.5);
    animation.toValue = @(0);
    animation.duration = 2;
    [layer addAnimation:animation forKey:@""];
    
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation1.fromValue = @(0.5);
    animation1.toValue = @(1);
    animation1.duration = 2;
    [layer addAnimation:animation1 forKey:@""];
    
    // 开始layer就因为设置了strokeStart、strokeEnd为0.5，所以动画结束后就消失了。
}

4.水波纹

另外还有一种动画效果，就是让 path 一直在变。

水波纹.gif

/**
 *  曲线公式
 *
 *  f(x) = Asin(ωx+φ)+k
 *  y = height * sin(self.angularSpeed * x / height  + self.angleOffset);
 *  self.angleOffset -= waveSpeed;
 */
- (CADisplayLink *)waveDisplayLink {
    if (!_waveDisplayLink) {
        CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(currentWave)];
        [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
        _waveDisplayLink = link;
    }
    return _waveDisplayLink;
}

- (void)currentWave {
    self.currentAngleOffset -= self.angleOffset;
    
    CGFloat width = CGRectGetWidth(self.frame);
    CGFloat height = CGRectGetHeight(self.frame);
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 0, height/2);
    
    CGFloat y = 0.f;
    for (CGFloat x = 0.f; x < width; x++) {
        y = height * sin(self.angularSpeed * x / height  + self.currentAngleOffset);
        CGPathAddLineToPoint(path, NULL, x, y);
    }
    CGPathAddLineToPoint(path, NULL, width, height);
    CGPathAddLineToPoint(path, NULL, 0, height);
    CGPathCloseSubpath(path);
    
    self.waveShapeLayer.path = path;
    CGPathRelease(path);
}

demo地址：https://github.com/taoGod/CAShapeLyer