CAGradientLayer功能

一、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