一、CAGradientLayer介绍
1、CAGradientLayer是用于处理渐变色的层结构
2、CAGradientLayer的渐变色能够做隐式动画
3、大部分情况下。CAGradientLayer都是与CAShapeLayer配合使用的
4、CAGradientLayer能够用作png遮罩效果
二、CAGradientLayer坐标系统
1、CAGradientLayer的坐标系统是从坐标（0，0）到（1，1）绘制的矩形
2、CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸
3、CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向
4、CAGradientLayer的颜色切割点是以0到1的比例来计算的
三、色差动画的实现
1、确定渐变色渐变方向
2、设定两种颜色，当中一种是透明色，第二种是自己定义颜色
3、设定好location颜色切割点值
4、CAGradientLayer的颜色切割点是以0到1的比例来计算的
@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.startPoint =CGPointMake(0,0);
self.gradientLayer.endPoint =CGPointMake(0,1);
// 设定颜色组
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 /255.f
green:arc4random() %255 /255.f
blue:arc4random() %255 /255.f
alpha:1].CGColor];
//设定颜色切割点动画
self.gradientLayer.locations =@[@(arc4random() %10 /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) {
self.gradientLayer.startPoint =CGPointMake(0,0);
self.gradientLayer.endPoint =CGPointMake(0,1);
}else if (direction ==DOWN) {
self.gradientLayer.startPoint =CGPointMake(0,1);
self.gradientLayer.endPoint =CGPointMake(0,0);
}else if (direction ==RIGHT) {
self.gradientLayer.startPoint =CGPointMake(1,0);
self.gradientLayer.endPoint =CGPointMake(0,0);
}else if (direction ==LEFT) {
self.gradientLayer.startPoint =CGPointMake(0,0);
self.gradientLayer.endPoint =CGPointMake(1,0);
}else {
self.gradientLayer.startPoint =CGPointMake(0,0);
self.gradientLayer.endPoint =CGPointMake(0,1);
}
}
- (EColorDirection)direction {
return_direction;
}
@end
#import "ColorUIImageView.h"
@interface ViewController ()
@property (nonatomic,strong)ColorUIImageView *colorView;
@end
@implementation ViewController
- (void)viewDidLoad {
[superviewDidLoad];
self.colorView = [[ColorUIImageViewalloc] initWithFrame:CGRectMake(0,0,198, 253)];
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