CAGradientLayer颜色渐变器

时间：2023-11-27 08:24:38

使用CAGradientLayer可以实现颜色的渐变, 我们先看下头文件

@interface CAGradientLayer : CALayer

@property(nullable, copy) NSArray *colors;
//颜色渐变的数组

@property(nullable, copy) NSArray<NSNumber *> *locations;
//渐变颜色的区间分布，locations的数组长度和color一致，默认是nil，会平均分布

@property CGPoint startPoint;
//映射locations中第一个位置，用单位向量表示，比如（0，0）表示从左上角开始变化。默认值是(0.5,0.0)

@property CGPoint endPoint;

//映射locations中最后一个位置，用单位向量表示，比如（1，1）表示到右下角变化结束。默认值是(0.5,1.0)

@property(copy) NSString *type;

//默认值是kCAGradientLayerAxial，表示按像素均匀变化。除了默认值也无其它选项

@end

下面是我用上面的代码实现的最终效果，startPoint是（0，0），endPoint是（1，1）。

CAGradientLayer颜色渐变器

下面我们试试用这个来实现一个渐变色的圆环,

CAGradientLayer颜色渐变器

需要说明的是CAGradientLayer只能实现矩形范围内的颜色渐变, 那渐变的圆环要如何实现呢? mask 对了

首先我们创建两个挨着的矩形渐变色块, 并把两个色块添加到同一个layer

CAGradientLayer颜色渐变器

再创建一个带有圆弧形状的layer作为mask

上代码:

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    //创建圆弧路径

    UIBezierPath * path      = [UIBezierPath bezierPathWithArcCenter:CGPointMake(, ) radius: startAngle:- 7.0 /  * M_PI endAngle:M_PI /  clockwise:YES];

    //添加圆弧Layer

    [self.view.layer addSublayer:[self createShapeLayerWithPath:path]];

    //配置左色块CAGradientLayer

    CAGradientLayer * leftL  = [self createGradientLayerWithColors:@[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor]];

    leftL.position           = CGPointMake(, );

    //配置右色块CAGradientLayer

    CAGradientLayer * rightL = [self createGradientLayerWithColors:@[(id)[UIColor greenColor].CGColor,(id)[UIColor yellowColor].CGColor]];

    rightL.position          = CGPointMake(, );

    //将两个色块拼接到同一个layer并添加到self.view

    CALayer * layer          = [CALayer layer];

    layer.bounds             = CGRectMake(, , , );

    layer.position           = self.view.center;

    [layer addSublayer:leftL];

    [layer addSublayer:rightL];

    [self.view.layer addSublayer:layer];

    //创建一个ShapeLayer作为mask

    CAShapeLayer * mask = [self createShapeLayerWithPath:path];

    mask.position       = CGPointMake(, );

    layer.mask          = mask;

    //mask.strokeEnd = 1;

}

//依照路径创建并返回一个CAShapeLayer

-(CAShapeLayer *)createShapeLayerWithPath:(UIBezierPath *)path {

    CAShapeLayer * layer = [CAShapeLayer layer];

    layer.path           = path.CGPath;

    layer.bounds         = CGRectMake(, , , );

    layer.position       = self.view.center;

    layer.fillColor      = [UIColor clearColor].CGColor;

    layer.strokeColor    = [UIColor colorWithRed: / 255.0 green: / 255.0 blue: / 255.0 alpha:].CGColor;

    layer.lineCap        = @"round";

    layer.lineWidth      = ;

    return layer;

}

//依照给定的颜色数组创建并返回一个CAGradientLayer

-(CAGradientLayer *)createGradientLayerWithColors:(NSArray *)colors {

    CAGradientLayer * gradientLayer = [CAGradientLayer layer];

    gradientLayer.colors            = colors;

    gradientLayer.locations         = @[@,@0.8];

    gradientLayer.startPoint        = CGPointMake(, );

    gradientLayer.endPoint          = CGPointMake(, );

    gradientLayer.bounds            = CGRectMake(, , , );

    return gradientLayer;

}

@end

可以改变mask的strokeEnd来实现动画

相关文章