OCiOS开发：CAGradientLayer 渐变色

OCiOS开发：CAGradientLayer 渐变色

CAGradientLayer 简介

• CAGradientLayer是CALayer图层类的子类，用于处理渐变色的层结构。
• CAGradientLayer的渐变色可以做隐式动画。
• CAGradientLayer和CAShapeLayer配合使用可实现复杂效果。
• CAGradientLayer可以用作PNG的遮罩效果。

CAGradientLayer 坐标系统

• CAGradientLayer的坐标系统是从坐标（0，0）到（1，1）绘制的矩形。
• CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸。
• CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向。
• CAGradientLayer的颜色分割点是以0~1的比例来计算的，颜色分割点为渐变色开始或终止的地方。

CAGradientLayer 属性介绍

• colors：渐变颜色数组
• locations：渐变颜色的区间分布（分割点），locations的数组长度和colors一致。这个属性可不设，默认是nil，系统会平均分布颜色如果有特定需要可设置，数组设置为0 ~ 1之间单调递增。
• startPoint：映射locations中起始位置，用单位向量表示。比如（0, 0）表示从左上角开始变化。默认值是：(0.5, 0.0)。
• endPoint：映射locations中结束位置，用单位向量表示。比如（1, 1）表示到右下角变化结束。默认值是：(0.5, 1.0)。
• type：默认值是kCAGradientLayerAxial，表示按像素均匀变化。

CAGradientLayer 案例

三原色渐变

• 效果展示
• 代码示例

- (void)viewDidLoad {

[super viewDidLoad];

/**< 初始化colorsView */

UIView *colorsView = [[UIView alloc] init];

colorsView.bounds = CGRectMake(0, 0, 220, 220);

colorsView.center = self.view.center;

[self.view addSubview:colorsView];

/**< 初始化渐变层 */

CAGradientLayer *gradientColorLayer = [CAGradientLayer layer];

gradientColorLayer.frame = colorsView.bounds;

[colorsView.layer addSublayer:gradientColorLayer];

/**< 设置颜色组 */

gradientColorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,

(__bridge id)[UIColor greenColor].CGColor,

(__bridge id)[UIColor blueColor].CGColor];

/**< 设置颜色分割点 */

gradientColorLayer.locations  = @[@(0.25), @(0.5), @(0.75)];

/**< 设置渐变颜色方向 */

// 1、起始位置

gradientColorLayer.startPoint = CGPointMake(0, 0);

// 2、结束位置

gradientColorLayer.endPoint   = CGPointMake(0, 1);

}

• 分割点动画

• 效果展示
• 代码示例

#import "ViewController.h"

@interface ViewController ()

@property (strong, nonatomic) CAGradientLayer *gradientLayer;

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

// 添加 CAGradientLayer

[self.view.layer addSublayer:self.gradientLayer];

// 延时3秒执行，实现分割点动画（隐式动画）

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

// 颜色分割点效果

self.gradientLayer.locations = @[@(0.4), @(0.5), @(0.6)];

});

}

#pragma mark - Getter methods

- (CAGradientLayer *)gradientLayer {

if (!_gradientLayer) {

// 初始化并创建

_gradientLayer             = [CAGradientLayer layer];

_gradientLayer.frame       = CGRectMake(0, 0, 250, 250);

_gradientLayer.position    = self.view.center;

_gradientLayer.borderWidth = 1.f;

// 设置颜色

_gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,

(__bridge id)[UIColor greenColor].CGColor,

(__bridge id)[UIColor blueColor].CGColor];

// 设置颜色渐变方向

_gradientLayer.startPoint = CGPointMake(0, 0);

_gradientLayer.endPoint   = CGPointMake(1, 0);

// 设置颜色分割点

_gradientLayer.locations  = @[@(0.25), @(0.5), @(0.75)];

}

return _gradientLayer;

}

@end

色差动画

• 实现思路
• 确定渐变色渐变方向；
• 至少设定两种颜色，此处设置两种颜色为例，其中一种是透明色，另外一种是自定义颜色。
• 设定好locations颜色分割点。
• 效果展示
• 代码示例

#import "ViewController.h"

@interface ViewController () {

NSTimer *_timer; /**< 定时器 */

}

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

@end

@implementation ViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.view.backgroundColor = [UIColor blackColor];

// 创建背景图片

UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];

imageView.bounds       = CGRectMake(0, 0, 260, 450);

imageView.center       = self.view.center;

[self.view addSubview:imageView];

// 添加渐变层

[imageView.layer addSublayer:self.gradientLayer];

// 初始化定时器

_timer = [NSTimer scheduledTimerWithTimeInterval:1.f

target:self

selector:@selector(respondsToTimerEvent)

userInfo:nil

repeats:YES];

}

#pragma mark - Timer and animations methods

- (void)respondsToTimerEvent {

// 设定颜色组动画

self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,

(__bridge id)[UIColor colorWithRed: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)];

}

#pragma mark - Getter methods

- (CAGradientLayer *)gradientLayer {

if (!_gradientLayer) {

// 初始化渐变层

_gradientLayer       = [CAGradientLayer layer];

_gradientLayer.frame = CGRectMake(0, 0, 260, 450);

// 设置颜色渐变方向

_gradientLayer.startPoint = CGPointMake(0, 0);

_gradientLayer.endPoint   = CGPointMake(0, 1);

// 设定颜色组

_gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,

(__bridge id)[UIColor blueColor].CGColor];

// 设定颜色分割点

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

}

return _gradientLayer;

}

@end