CAGradientLayer 渐变色

CAGradientLayer可以实现：

• 1、单色渐变
• 2、多色渐变
• 3、在不同方向的渐变
• 4、可以动画渐变
• 5、可做加载进度条

GitHub工程地址本篇主要的内容是在工程中Layer/CAGradientLayer/GradientLayer里面

属性说明:

@property(nullable, copy) NSArray *colors;
设置CAGradientLayer的渐变色值，是一个CGColorRef对象的数组

@property(nullable, copy) NSArray *locations;
设置渐变色的分隔点，是一个number对象的数组

@property CGPoint startPoint;
@property CGPoint endPoint;
CAGradientLayer颜色渐变的起点和结束点，取值范围都为(0,0)->(1,1)

@property(copy) NSString *type;
设置CAGradientLayer颜色渐变是否是均匀分布的。只有一个值：kCAGradientLayerAxial

---

1、单方向单色渐变

实现代码:

/*懒加载*/
- (CAGradientLayer *)gradientLayer
{
    if(!_gradientLayer){
//        初始化一个CAGradientLayer对象
        _gradientLayer = [CAGradientLayer layer];
//        设置位置
        _gradientLayer.frame = CGRectMake(100, 100, 200, 30);
//        设置颜色渐变数组
        /*
         *   (__bridge <#type#>)<#expression#>) 仅仅将值的地址进行转换，并没有转移对象的所有权，如果被桥接的对象释放，则桥接后的值也无法使用。在ARC下使用__bridge，因为所有权仍然属于OC，因此归ARC管制，不必手动释放。
         */
        _gradientLayer.colors = @[CGColorToNSObject([UIColor clearColor]),CGColorToNSObject([UIColor redColor])];
//         设置渐变颜色分割点
//        _gradientLayer.locations = @[@(0),@(0.5),@(0.9)];
//        使得颜色像素均匀变化（仅有一个选择）
        _gradientLayer.type = kCAGradientLayerAxial;
//        从左上角到右上角
        _gradientLayer.startPoint = CGPointMake(0, 0);
        _gradientLayer.endPoint = CGPointMake(1, 0);
    }
    return _gradientLayer;
}

实现结果：

image.png

注意事项：

//        设置颜色渐变数组
        /*
         *   (__bridge <#type#>)<#expression#>) 仅仅将值的地址进行转换，并没有转移
对象的所有权，如果被桥接的对象释放，则桥接后的值也无法使用。在ARC下使用__bridge，因为所有
权仍然属于OC，因此归ARC管制，不必手动释放。
         */
        _gradientLayer.colors = @[CGColorToNSObject([UIColor clearColor]),CGColorToNSObject([UIColor redColor])];

如果要实现单色渐变的话，则在设置colors的时候，如果只设置一个color的话，是不会显示的；这时就需要设置两个值，但是又是单色，所以前一个或者后一个可以设为透明色。设置多个颜色渐变的话，就只需要在数组里面添加色值就可以了

2、单方向多色渐变

实现代码：

/*懒加载*/
- (CAGradientLayer *)gradientLayer
{
    if(!_gradientLayer){
//        初始化一个CAGradientLayer对象
        _gradientLayer = [CAGradientLayer layer];
//        设置位置
        _gradientLayer.frame = CGRectMake(100, 100, 200, 200);
//        设置颜色渐变数组
        /*
         *   (__bridge <#type#>)<#expression#>) 仅仅将值的地址进行转换，并没有转移对象的所有权，如果被桥接的对象释放，则桥接后的值也无法使用。在ARC下使用__bridge，因为所有权仍然属于OC，因此归ARC管制，不必手动释放。
         */
        _gradientLayer.colors = @[CGColorToNSObject([UIColor redColor]),CGColorToNSObject([UIColor yellowColor]),CGColorToNSObject([UIColor greenColor])];
//         设置渐变颜色分割点
        _gradientLayer.locations = @[@(0),@(0.5),@(0.9)];
//        使得颜色像素均匀变化（仅有一个选择）
        _gradientLayer.type = kCAGradientLayerAxial;
//        从左上角到右上角
        _gradientLayer.startPoint = CGPointMake(0, 0);
        _gradientLayer.endPoint = CGPointMake(1, 1);
    }
    return _gradientLayer;
}

调用代码

[self.layer addSublayer:self.gradientLayer];

实现结果：

单方向多色渐变

3、圆环渐变动画

想绘制渐变圆环的话，就要借助CAShaperLayer，将shaperLayer的路径设置成圆环，然后设置CAGradientLayer的mask为shaperLayer,然后给shaperLayer添加动画。

实现代码：

/*定义一个底层的CAGradientLayer*/
- (CAGradientLayer *)circleGradientLayer
{
    if(!_circleGradientLayer){
        //初始化一个变量
        _circleGradientLayer = [CAGradientLayer layer];
        //设置大小
        _circleGradientLayer.frame = CGRectMake(100, 320, 100, 100);
        //设置渐变颜色数组
        _circleGradientLayer.colors = @[CGColorToNSObject([UIColor redColor]),CGColorToNSObject([UIColor yellowColor]),CGColorToNSObject([UIColor greenColor])];
        //设置开始的point（开始的point取值范围为(0,0)->(1,1)）
        _circleGradientLayer.startPoint = CGPointMake(0, 0);
        //设置结束的point（结束的point的取值范围为(0,0)->(1,1)）
        _circleGradientLayer.endPoint = CGPointMake(0, 1);
    }
    return _circleGradientLayer;
}

/*定义一个CAGradientLayer的mask蒙版*/
- (CAShapeLayer *)circleShaperLayer
{
    if(!_circleShaperLayer){
        //初始化一个CAShapeLayer的变量
        _circleShaperLayer = [CAShapeLayer layer];
        //设置线宽
        _circleShaperLayer.lineWidth = 5;
        //设置填充色，默认为黑色，如果不想要填充色，就设置为clearColor
        _circleShaperLayer.fillColor = [UIColor clearColor].CGColor;
        //设置线条颜色
        _circleShaperLayer.strokeColor = [UIColor redColor].CGColor;
        /*
         * 设置圆环的路劲
         * ArcCenter 圆心坐标，坐标系是_circleGradientLayer
         * radius 半径
         * startAngle 起始点
         * endAngle 结束点
         * clockwise 绘画的方向，0为逆时针，1为顺时针
         */
        UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:45 startAngle:0 endAngle:2*M_PI clockwise:0];
        _circleShaperLayer.path = path.CGPath;
        //创建一个CABasicAnimation动画，keyPath的值为strokeEnd
        CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        //动画时长
        animation.duration = 3.0;
        //动画开始的值
        animation.fromValue = @(0);
        //动画结束的值
        animation.toValue = @(1);
        //动画的执行刺手
        animation.repeatCount = 100;
        //添加动画
        [_circleShaperLayer addAnimation:animation forKey:@"strokeEndAnimation"];
    }
    return _circleShaperLayer;
}

调用结果：

[self.layer addSublayer:self.circleGradientLayer]; self.circleGradientLayer.mask = self.circleShaperLayer;

实现结果：

圆环渐变色动画.gif

---

本篇就介绍到这里，欢迎有问题的朋友可以分享