CAGradientLayer色彩坡形器

標籤：property   self   import   make   nullable   blog   技術   ash   har   

使用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只能實現矩形範圍內的色彩坡形, 那漸層的圓環要如何?呢? mask 對了

 

首先我們建立兩個挨著的矩形漸層色塊, 並把兩個色塊添加到同一個layer

 

再建立一個帶有圓弧形狀的layer作為mask

上代碼:

#import "ViewController.h"@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];        //建立圓弧路徑    UIBezierPath * path      = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:45 startAngle:- 7.0 / 6 * M_PI endAngle:M_PI / 6 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(25, 40);        //配置右色塊CAGradientLayer    CAGradientLayer * rightL = [self createGradientLayerWithColors:@[(id)[UIColor greenColor].CGColor,(id)[UIColor yellowColor].CGColor]];    rightL.position          = CGPointMake(75, 40);        //將兩個色塊拼接到同一個layer並添加到self.view    CALayer * layer          = [CALayer layer];    layer.bounds             = CGRectMake(0, 0, 100, 80);    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(50, 40);    layer.mask          = mask;    //mask.strokeEnd = 1;}//依照路徑建立並返回一個CAShapeLayer-(CAShapeLayer *)createShapeLayerWithPath:(UIBezierPath *)path {        CAShapeLayer * layer = [CAShapeLayer layer];    layer.path           = path.CGPath;    layer.bounds         = CGRectMake(0, 0, 100, 75);    layer.position       = self.view.center;    layer.fillColor      = [UIColor clearColor].CGColor;    layer.strokeColor    = [UIColor colorWithRed:33 / 255.0 green:192 / 255.0 blue:250 / 255.0 alpha:1].CGColor;    layer.lineCap        = @"round";    layer.lineWidth      = 10;        return layer;}//依照給定的顏色數組建立並返回一個CAGradientLayer-(CAGradientLayer *)createGradientLayerWithColors:(NSArray *)colors {        CAGradientLayer * gradientLayer = [CAGradientLayer layer];    gradientLayer.colors            = colors;    gradientLayer.locations         = @[@0,@0.8];    gradientLayer.startPoint        = CGPointMake(0, 1);    gradientLayer.endPoint          = CGPointMake(0, 0);    gradientLayer.bounds            = CGRectMake(0, 0, 50, 80);        return gradientLayer;}@end

可以改變mask的strokeEnd來實現動畫

 

 

 

 

 

 

CAGradientLayer色彩坡形器