iOS开发学习-CAGredientLayer渐变图层

CAGradientLayer继承于CALayer，平行于CAShapeLayer，CAReplicatorLayer等，是用来生成两种或更多颜色平滑渐变的。

渐变方向：

• 从左到右
• 从右到左
• 从上到下
• 从下到上
• 其它就是对角线方向

另外：colors,locations,startPoint,endPoint都可以实现动画效果。
配合CAShapeLayer有很好的动画效果，后面会有讲到哦。

1.基本使用

// 渐变图层
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    
    gradientLayer.frame = CGRectMake(20, 50, 300, 300);
    
    [self.view.layer addSublayer:gradientLayer];
    
    // ColorRef 通过bridge id 转化
    gradientLayer.colors = @[
                             (__bridge id)[UIColor greenColor].CGColor,
                              (__bridge id)[UIColor yellowColor].CGColor,
                             (__bridge id)[UIColor redColor].CGColor];
    // 颜色分割点
    gradientLayer.locations = @[@0.0,@0.4,@1.0];
    // 开始点
    gradientLayer.startPoint = CGPointMake(0, 0);
    // 结束点
    gradientLayer.endPoint = CGPointMake(1, 0);

切记：属性colors数组里元素是ColorRef对象，所以由UIColor记得桥椄和转化为CGColor。

Snip20170224_28.png

2.封装使用

2.1 封装CAGredientLayer，接口如下：

@interface GBGradientLayer : CAGradientLayer

/**
 渐变方向枚举

 - DirectionFromTopToBottom: 从上到下
 - DirectionFromBottomToTop: 从下到上
 - DirectionFromLeftToRight: 从左到右
 - DirectionFromRightToLeft: 从右到左
 */
typedef NS_ENUM(NSInteger, GBColorGradientDirection) {
    DirectionFromTopToBottom = 0,
    DirectionFromBottomToTop,
    DirectionFromLeftToRight,
    DirectionFromRightToLeft
};

/**
 渐变方向
 */
@property (nonatomic, assign) GBColorGradientDirection colorGradientDirection;

/**
 颜色数组
 */
@property (nonatomic, strong) NSArray  *colorArray;

/**
 类方法创建对象

 @param frame frame
 @return 对象
 */
+ (instancetype)layerWithFrame:(CGRect)frame;

@end

2.2如何使用

GBGradientLayer *layer = [GBGradientLayer layerWithFrame:CGRectMake(20, 50, 300, 300)];
    // 颜色数组
    layer.colorArray = @[[UIColor redColor], [UIColor whiteColor], [UIColor redColor]];
    // 渐变方向
    layer.colorGradientDirection = DirectionFromLeftToRight;
    // 颜色分割点
    layer.locations = @[@(-1.0),@(-0.5),@0.0];
    [self.view.layer addSublayer:layer];

2.3配合CAShapeLayer实现渐变动画

GBGradientLayer *layer = [GBGradientLayer layerWithFrame:CGRectMake(20, 50, 300, 300)];
    // 颜色数组
    layer.colorArray = @[[UIColor redColor], [UIColor whiteColor], [UIColor redColor]];
    // 渐变方向
    layer.colorGradientDirection = DirectionFromLeftToRight;
    // 颜色分割点
    layer.locations = @[@(-1.0),@(-0.5),@0.0];
    
    [self.view.layer addSublayer:layer];
    
    _layer = layer;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:layer.position radius:110 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.lineWidth = 2;
    
    shapeLayer.strokeColor = [UIColor orangeColor].CGColor;
    
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
   
    shapeLayer.path = path.CGPath;
    
    [self.view.layer addSublayer:shapeLayer];
    // 设置蒙板
    layer.mask = shapeLayer;

    [NSTimer scheduledTimerWithTimeInterval:1.5 repeats:YES block:^(NSTimer * _Nonnull timer) {
        
        [self animation];
    }];
    
}

- (void)animation {
    
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"locations"];
    
    ani.fromValue = @[@(-1.0),@(-0.5),@0.0];
    ani.toValue = @[@1.0,@1.5,@2.0];
    ani.duration = 1.5;
    
    [_layer addAnimation:ani forKey:@"ani"];
}

接下来是内部实现：

#import "GBGradientLayer.h"

@interface GBGradientLayer ()

@property (nonatomic,strong) GBGradientLayer *layer;

@end

@implementation GBGradientLayer

+ (instancetype)layerWithFrame:(CGRect)frame {
    
    return [[self alloc] layerWithFrame:frame];
}

- (instancetype)layerWithFrame:(CGRect)frame {
    
    self.layer = [GBGradientLayer layer];
    
    self.layer.frame = frame;
    
    return self.layer;
}
- (void)setColorGradientDirection:(GBColorGradientDirection)colorGradientDirection {
    
    _colorGradientDirection = colorGradientDirection;
    
    switch (colorGradientDirection) {
        case DirectionFromTopToBottom:
            
            self.startPoint = CGPointMake(0, 0);
            self.endPoint = CGPointMake(0, 1);
            break;
            
        case DirectionFromBottomToTop:
            
            self.startPoint = CGPointMake(0, 1);
            self.endPoint = CGPointMake(0, 0);
            break;
            
        case DirectionFromLeftToRight:
            
            self.startPoint = CGPointMake(0, 0);
            self.endPoint = CGPointMake(1, 0);
            break;
            
        case DirectionFromRightToLeft:
            
            self.startPoint = CGPointMake(1, 0);
            self.endPoint = CGPointMake(0, 0);
            break;
        default:
            break;
    }
}

- (void)setColorArray:(NSArray *)colorArray {
    
    _colorArray = colorArray;
    
    NSMutableArray *array = [NSMutableArray array];
    
    [colorArray enumerateObjectsUsingBlock:^(UIColor *obj, NSUInteger idx, BOOL *stop) {
        
        [array addObject:(__bridge id)obj.CGColor];
    }];
    
    
    self.colors = array.copy;
}

Snip20170224_27.png