首页 > 代码库 > CAGradientLayer功能

CAGradientLayer功能

一、CAGradientLayer介绍

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

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

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

4CAGradientLayer能够用作png遮罩效果


二、CAGradientLayer坐标系统

1CAGradientLayer的坐标系统是从坐标(00)到(11)绘制的矩形

2CAGradientLayerframe值的size不为正方形的话,坐标系统会被拉伸

3CAGradientLayerstartPointendPoint会直接影响颜色的绘制方向

4CAGradientLayer的颜色切割点是以01的比例来计算的


三、色差动画的实现

1、确定渐变色渐变方向

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

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

4CAGradientLayer的颜色切割点是以01的比例来计算的

@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 - 重写settergetter方法

@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


CAGradientLayer功能