CAGradientLayer使用详细解析

一.CAGradientLayer介绍

CAGradientLayer是用于色彩梯度展示的layer图层（渐变色），通过CAGradientLayer，我们可以很轻松的创建出有过渡效果的色彩图，在大部分情况下CAGradientLayer都是配合CAShapeLayer使用的；而且CAGradientLayer还有一个好处就是使用了硬件加速。

二.CAGradientLayer坐标系统

1.CAGradientLayer的坐标系统是从坐标（0，0）到（1，1）绘制的矩形;
2.CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸;
3.CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向;
4.CAGradientLayer的颜色分割点是以0到1的比例来计算的;

示例图：

三.参数说明

@property(nullable, copy) NSArray *colors;

CGColorRef数组，里面规定了所有的梯度数组所显示的颜色,默认是nil;

示例，在其他属性相同的情况下，我只改变colors里面的值，如下图：

@property(nullable, copy) NSArray<NSNumber *> *locations;

示例，在其他属性相同的情况下，我只改变locations里面的值，如下图：

@property CGPoint startPoint;

图层绘制的起点坐标，默认是(0.5,0)

@property CGPoint endPoint;

图层绘制的重点坐标，默认是(0.5,1)

示例，一个我使用默认的起始点，一个我自定义起始点，如下图：

@property(copy) NSString *type;

默认值是kCAGradientLayerAxial，表示按线性梯度均匀变化。除了默认值也无其它选项。

因为该属性就一个值，我就不做演示了。

四.综合示例

图片渐变

我们在项目中很多情况下都会用到渐变，比如一张图片我想设置左右两边渐变；效果如下：

代码

- (void)uiConfig{
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"综合实例";
    
    UIImageView *imageView = [[UIImageView alloc]init];
    imageView.clipsToBounds = YES;
    imageView.frame = CGRectMake((ScreenWidth - 320)/2, 84, 320, 200);
    imageView.image = [UIImage imageNamed:@"headimg"];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.layer.borderColor = [UIColor redColor].CGColor;
    imageView.layer.borderWidth = 1.0;
    [self.view addSubview:imageView];
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0, 0, 320, 200);
    gradientLayer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,(id)[UIColor clearColor].CGColor,(id)[UIColor whiteColor].CGColor, nil];
    gradientLayer.locations  = @[@(0.25), @(0.5), @(0.75)];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    [imageView.layer addSublayer:gradientLayer];
    
    UILabel *testLab = [[UILabel alloc]init];
    testLab.text = @"CAGradientLayer *gradientLayer = [CAGradientLayer layer];\ngradientLayer.frame = CGRectMake(0, 0, 320, 200);\ngradientLayer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,(id)[UIColor clearColor].CGColor,(id)[UIColor whiteColor].CGColor, nil];\ngradientLayer.locations  = @[@(0.25), @(0.5), @(0.75)];\ngradientLayer.startPoint = CGPointMake(0, 0);\ngradientLayer.endPoint = CGPointMake(1, 0);\n[imageView.layer addSublayer:gradientLayer];";
    testLab.frame = CGRectMake(10, 294, ScreenWidth - 20, 250);
    testLab.backgroundColor = [UIColor colorWithRed:0.973 green:0.973 blue:0.973 alpha:1.00];
    testLab.numberOfLines = 0;
    testLab.font = [UIFont systemFontOfSize:14];
    [self.view addSubview:testLab];
}

彩色进度条

效果如下：

代码

我创建了一个ProgressBarView集成UIView

1.参数

#import <UIKit/UIKit.h>

@interface ProgressBarView : UIView

- (instancetype)initWithFrame:(CGRect)frame;

@property (nonatomic, assign) CGFloat progress;

@end

2.初始化

- (instancetype)initWithFrame:(CGRect)frame{
    if(self == [super initWithFrame:frame]){
        [self initData];
        [self uiConfig];
        [self performAnimation];
    }
    return self;
}

- (void)initData{
    self.progress = 0.0;
}

- (void)uiConfig{
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.bounds;
    gradientLayer.startPoint = CGPointMake(0, 0.5);
    gradientLayer.endPoint = CGPointMake(1.0, 0.5);
    [self.layer addSublayer:gradientLayer];
    
    NSMutableArray *colors = [[NSMutableArray alloc]init];
    for (NSInteger hue = 0; hue <= 360; hue += 5){
        UIColor * color = [UIColor colorWithHue:1.0 * hue / 360 saturation:1.0 brightness:1.0 alpha:1.0];
        [colors addObject:(id)[color CGColor]];
    }
    gradientLayer.colors = [NSArray arrayWithArray:colors];
    
    self.maskLayer = [CALayer layer];
    [self.maskLayer setFrame:CGRectMake(0.0, 0.0, 0.0, self.frame.size.height)];
    [self.maskLayer setBackgroundColor:[[UIColor blackColor] CGColor]];
    [gradientLayer setMask:self.maskLayer];
    
    self.gradientLayer = gradientLayer;
}

3.设置动画

获取CAGradientLayer的colors属性改变数组里面的顺序，并添加上动画

- (void)performAnimation{
    //获取CAGradientLayer的colors属性改变数组里面的顺序，并添加上动画
    NSMutableArray * colorArray = [[self.gradientLayer colors] mutableCopy];
    UIColor * lastColor = [colorArray lastObject];
    [colorArray removeLastObject];
    [colorArray insertObject:lastColor atIndex:0];
    NSArray * shiftedColors = [NSArray arrayWithArray:colorArray];
    
    [self.gradientLayer setColors:shiftedColors];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"colors"];
    [animation setToValue:shiftedColors];
    [animation setDuration:0.08];
    [animation setFillMode:kCAFillModeForwards];
    [animation setDelegate:self];
    [self.gradientLayer addAnimation:animation forKey:@"animateGradient"];
}

为了移动动画可以一直持续，我们要设置动画的代理，并实现动画结束的代理方法，并在结束方法中在重复执行上面的动作。就实现了持续移动的动画。

//为了移动动画可以一直持续，我们要设置动画的代理，并实现动画结束的代理方法，并在结束方法中在重复执行上面的动作。就实现了持续移动的动画。
- (void)animationDidStop:(CAAnimation *)animation finished:(BOOL)flag{
    [self performAnimation];
}

4.进度值

- (void)setProgress:(CGFloat)value{
    if (_progress != value){
        _progress = MIN(1.0, fabs(value));
        [self setNeedsLayout];
    }
}

- (void)layoutSubviews{
    CGRect maskRect = [self.maskLayer frame];
    maskRect.size.width = CGRectGetWidth([self bounds]) * self.progress;
    [self.maskLayer setFrame:maskRect];
}

五.DEMO下载

点击下载

http://download.csdn.net/detail/u014220518/9832448