Shape/GradientLayer

参考文档1
参考文档2
参考文档3
参考文档4
参考文档5
参考文档6

CAShapeLayer

CAShapeLayer 及 CAGradientLayer 是CALayer 两个重要的类。作为开发小学生，认真参考了以上所有文档，码出来只作标记，便于回顾。

CAShapeLayer是通过矢量图形来绘制的图层子类。
只需要指定颜色，线宽，用CGPath指定路径，CAShapeLayer会通过GPU自动渲染， 节省性能,渲染速度快，不占内存，不会被图层边界剪裁,不会出现像素化。

DrawRect:属于CoreGraphic框架，占用CPU,消耗性能。
UIBeziePath只提供路径，具体样式由shape属性决定

展示两个效果

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
  
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(200 *0.25, 200*0.5)];
    [path addLineToPoint:CGPointMake(200 * 0.45, 200 *0.70)];
    [path addLineToPoint:CGPointMake(200 * 0.75, 200 *0.3)];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.strokeStart = 0;
    layer.lineWidth = 15;
    layer.lineCap = kCALineCapRound;
    layer.lineJoin = kCALineJoinRound;
    layer.fillColor = nil;
    [self.bgView.layer addSublayer:layer];
    
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    basicAnimation.duration = 0.5;
    basicAnimation.fromValue = @0;
    basicAnimation.toValue = @1;
    [layer addAnimation:basicAnimation forKey:nil];    
}

- (void)animationWithSlider{
    
    self.slider.bottom = self.bgView.top- 10;
    self.slider.width = self.bgView.width;
    self.slider.centerX = self.bgView.centerX;
    [self.view addSubview:self.slider];
    
    //将原先正方形的橙色背景变成柱状
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 50, 200) cornerRadius:25];
    layer.lineWidth = 2;
    layer.lineCap = kCALineCapRound;
    layer.lineJoin = kCALineJoinRound;
    layer.path = path.CGPath;
    layer.strokeColor = [UIColor grayColor].CGColor;
    self.bgView.layer.mask = layer;
    
    
    
}
- (void)valueChangeAction:(UISlider*)sender{
   
   NSArray *array =  [self.bgView.layer sublayers];
    if (array) {
        NSLog(@"%ld",array.count);
        for (CALayer *layer in array) {
            [layer removeFromSuperlayer];
        }
    }
    
        CAShapeLayer *layer = [CAShapeLayer layer];
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(25, 175)]; //总高200,线宽40，起始点各方向延长20
        [path addLineToPoint:CGPointMake(25, 25)];//总高200，线宽40，终点各方向延长20
        
        layer.lineWidth = 40;
        layer.lineCap = kCALineCapRound;
        layer.strokeColor = [UIColor redColor].CGColor;
        layer.path = path.CGPath;
        layer.strokeStart = 0;
        layer.strokeEnd = sender.value;
        
        [self.bgView.layer addSublayer:layer]; 
}

CAGradientLayer

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.bgView];
    //[self animationWithSlider];
    
    _gradientLayer = [CAGradientLayer layer];
    _gradientLayer.frame = self.bgView.bounds;
    [self.bgView.layer addSublayer:_gradientLayer];
    
    //设定变色广向
    _gradientLayer.startPoint = CGPointMake(0, 0);
    _gradientLayer.endPoint = CGPointMake(1, 1);
    //locations并不是表示颜色值所在位置,
    //它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.
    _gradientLayer.locations = @[@(0.25),@(0.5),@(0.75)];
    
    //设定定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(change:) userInfo:nil repeats:YES];
    
}

-(void)change:(NSTimer*)timer{
    
    //定时改变颜色
    self.gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
                                                               green:arc4random() % 255 / 255.0
                                                                blue:arc4random() % 255 / 255.0
                                                               alpha:1.0].CGColor,
                                  (__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
                                                               green:arc4random() % 255 / 255.0
                                                                blue:arc4random() % 255 / 255.0
                                                               alpha:1.0].CGColor,
                                  (__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
                                                               green:arc4random() % 255 / 255.0
                                                                blue:arc4random() % 255 / 255.0
                                                               alpha:1.0].CGColor];
    
    //定时改变分割点
    self.gradientLayer.locations = @[@(arc4random() % 10 / 10.0f),@(arc4random() % 10 / 10.0f), @(1.0f)];
}

示例

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.view addSubview:self.bgView];
    //[self animationWithSlider];
    
    _gradientLayer = [CAGradientLayer layer];
    _gradientLayer.frame = self.bgView.bounds;
    [self.bgView.layer addSublayer:_gradientLayer];
    //设定变色广向
    _gradientLayer.startPoint = CGPointMake(0, 0);
    _gradientLayer.endPoint = CGPointMake(1, 0);
    _gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                           (__bridge id)[UIColor whiteColor].CGColor,
                           (__bridge id)[UIColor redColor].CGColor
                           ];
    
    //locations并不是表示颜色值所在位置,
    //它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.
    _gradientLayer.locations = @[@(-2),@(-1),@(0)];
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path =[UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:2*M_PI  clockwise:YES].CGPath;
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.strokeStart = 0;
    layer.strokeEnd = 1;
    layer.lineWidth = 5;
    layer.fillColor = [UIColor clearColor].CGColor;
    [self.bgView.layer addSublayer:layer];
    _gradientLayer.mask = layer;
    
    
    //设定定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(changeAction:) userInfo:nil repeats:YES];
    
}
- (void)changeAction:(NSTimer*)timer{
    
    [self.gradientLayer removeAllAnimations];
    
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"locations"];
    basicAnimation.duration = 0.8;
    basicAnimation.fromValue = @[@(-2),@(-1),@(0)];
    basicAnimation.toValue = @[@(1),@(1.2),@(1.5)];
    [self.gradientLayer addAnimation:basicAnimation forKey:nil];
    
}