一、CAGradientLayer介绍

、CAGradientLayer是用于处理渐变色的层结构

、CAGradientLayer的渐变色能够做隐式动画

、大部分情况下。CAGradientLayer都是与CAShapeLayer配合使用的

、CAGradientLayer能够用作png遮罩效果

二、CAGradientLayer坐标系统

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

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

、CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向

、CAGradientLayer的颜色切割点是以到的比例来计算的

三、色差动画的实现

1、确定渐变色渐变方向

2、设定两种颜色，当中一种是透明色，第二种是自己定义颜色

3、设定好location颜色切割点值

、CAGradientLayer的颜色切割点是以到的比例来计算的

@property (nonatomic,strong) CAGradientLayer *gradientLayer;//渐变层

@property (nonatomic,strong) NSTimer         *timer;       //
定时器

- (void) colors {

self.view.backgroundColor = [UIColorblackColor];

//
创建背景图片

UIImageView *imageView = [[UIImageViewalloc] initWithImage:[UIImageimageNamed:@"bg"]];

imageView.center       =self.view.center;

[self.viewaddSubview:imageView];

//
初始化渐变层

self.gradientLayer       = [CAGradientLayerlayer];

self.gradientLayer.frame = imageView.bounds;

[imageView.layeraddSublayer:self.gradientLayer];

//设定颜色渐变方向

,);

,);

//
设定颜色组

self.gradientLayer.colors =@[(__bridgeid)[UIColorclearColor].CGColor,

(__bridgeid)[UIColorredColor].CGColor];

//
设定颜色切割点

self.gradientLayer.locations =
@[@(0.5f), @(1.f)];

//
初始化定时器

self.timer = [NSTimerscheduledTimerWithTimeInterval:2.f

target:self

selector:@selector(timerEvent)

userInfo:nil

repeats:YES];

}

- (void)timerEvent {

//
设定颜色组动画

self.gradientLayer.colors =@[(__bridgeid)[UIColorclearColor].CGColor,

(__bridgeid)[UIColorcolorWithRed:arc4random() % /255.f

green:arc4random() % /255.f

blue:arc4random() % /255.f

alpha:].CGColor];

//设定颜色切割点动画

/10.f),@(1.f)];

}

四、用CAGradientLayer实现带色差动画的View

1、确定几个属性值

2、确定能够做动画的參数

3、重写setter方法做动画

typedefenum : NSUInteger {

UP,   // 从上往下

DOWN, // 从下往上

RIGHT,// 从右往左

LEFT, // 从左往右

} EColorDirection;

@interface ColorUIImageView :UIImageView

/**

*  确定方向（能够做动画）

*/

@property (nonatomic,assign) EColorDirection  direction;

/**

*  颜色（能够做动画）

*/

@property (nonatomic,strong)UIColor  *color;

/**

*  百分比（能够做动画）

*/

@property (nonatomic,assign)CGFloat   percent;

@end

#import "ColorUIImageView.h"

@interface
ColorUIImageView ()

@property (nonatomic,strong)CAGradientLayer *gradientLayer;

@end

@implementation ColorUIImageView

- (instancetype)initWithFrame:(CGRect)frame

{

self = [superinitWithFrame:frame];

if (self) {

//
初始化CAGradientLayer

self.gradientLayer           = [CAGradientLayerlayer];

self.gradientLayer.frame     =self.bounds;

self.gradientLayer.colors    =@[(__bridgeid)[UIColorclearColor].CGColor,

(__bridgeid)[UIColorredColor].CGColor];

self.gradientLayer.locations =@[@(1),@(1)];

[self.layeraddSublayer:self.gradientLayer];

}

return
self;

}

#pragma mark - 重写setter，getter方法

@synthesize color = _color;

- (void)setColor:(UIColor *)color {

_color = color;

self.gradientLayer.colors =@[(__bridgeid)[UIColorclearColor].CGColor,

(__bridgeid)color.CGColor];

}

- (UIColor *)color {

return _color;

}

@synthesize percent =_percent;

- (void)setPercent:(CGFloat)percent {

_percent = percent;

self.gradientLayer.locations =@[@(percent),@(1)];

}

- (CGFloat)percent {

return_percent;

}

@synthesize direction =_direction;

- (void)setDirection:(EColorDirection)direction {

_direction = direction;

if (direction == UP) {

,);

,);

}else if (direction ==DOWN) {

,);

,);

}else if (direction ==RIGHT) {

,);

,);

}else if (direction ==LEFT) {

,);

,);

}else {

,);

,);

}

}

- (EColorDirection)direction {

return_direction;

}

@end

#import "ColorUIImageView.h"

@interface ViewController ()

@property (nonatomic,strong)ColorUIImageView *colorView;

@end

@implementation ViewController

- (void)viewDidLoad {

[superviewDidLoad];

,,,
)];

self.colorView.center =self.view.center;

self.colorView.image  = [UIImageimageNamed:@"bg"];

[self.viewaddSubview:self.colorView];

[selfperformSelector:@selector(event)

withObject:nil

afterDelay:1.f];

}

- (void)event {

self.colorView.direction =DOWN;

self.colorView.color     = [UIColorcyanColor];

self.colorView.percent   =0.5;

}

@end