CAGradientLayer基本使用方法

Gradient：本身就是梯度的意思，所以在这里就是作为渐变色来理解

1，CAGradientLayer用于处理渐变色的层结构

2，CAGradientLayer的渐变色可以做隐式动画

3，大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。

4，CAGradientLayer可以用作PNG的遮罩效果

关于CAGradientLayer的坐标系统

为什么要提到CAGradientLayer的坐标系统呢？因为渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关



根据上图的坐标，设定好起点和终点，渐变色的方向就会根据起点指向终点的方向来渐变了。后面会代码里会有写。

1，CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形

2，CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸

3，CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向

4，CAGradientLayer的颜色分割点时以0到1的比例来计算的

下面直接上代码，里面的注视都写好了。就不一一解释了

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@property (nonatomic, strong) NSTimer *timer;
@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
imageView.frame = CGRectMake(0, 0, self.view.bounds.size.width, 200);
[self.view addSubview:imageView];
imageView.center = self.view.center;

//初始化渐变图层
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = imageView.bounds;
[imageView.layer addSublayer:self.gradientLayer];

//设置渐变颜色方向
self.gradientLayer.startPoint = CGPointMake(1, 1);
self.gradientLayer.endPoint = CGPointMake(0, 0);
//当前图层的右下角为(0.0)点坐标
//当前图层的左上角为(1.1)点坐标

//设定颜色组
self.gradientLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor blackColor].CGColor];

//colors中的元素个数应该和locations中的元素个数相同,不然会导致颜色显示不完整
//颜色分布为从colors中的第一个颜色,按照从(0.0)开始的顺序,根据分割点进行颜色渐变

//设置颜色分割点
self.gradientLayer.locations = @[@(0.0f),@(0.5f), @(1.0f)];//
//分割点的颜色也是按照从左下角(0.0)开始的,以左下和右上形成对角线,进行颜色分割

self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0f target:self selector:@selector(TimerEvent) userInfo:nil repeats:YES];

}

- (void)TimerEvent {
self.gradientLayer.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor colorWithRed:arc4random()%255 / 255.0 green:arc4random() %255 / 255.0 blue:arc4random() %255 / 255.0 alpha:1.0].CGColor,(id)[UIColor colorWithRed:arc4random()%255 / 255.0 green:arc4random() %255 / 255.0 blue:arc4random() %255 / 255.0 alpha:1.0].CGColor];

self.gradientLayer.locations = @[@(0.0f),@(0.5f),@(1.0f)];
}
@end

效果图如下(有点掉帧,模拟器或真机上效果更佳):