CAGradientLayer简介
- CAGradientLayer是用于处理渐变色的层结构
- CAGradientLayer的渐变色可以做隐式动画
- 大部分情况下，CAGradientLayer都是与CAShapeLayer配合使用的
- CAGradientLayer可以用作png遮罩效果
| 多彩圆环 | 多彩进度条 | |
|---|---|---|
 |
 |
| 动态多彩遮罩 | 动态图像遮罩 | |
|---|---|---|
 |
 |
CAGradientLayer坐标系统
- CAGradientLayer的坐标系统是从坐标（0，0）到（1，1）绘制的矩形
- CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸
- CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向
- CAGradientLayer的颜色分割点是以0到1的比例来计算的
代码
#import "ViewController.h"
@interface ViewController ()
@property (strong, nonatomic) CAGradientLayer *gradientLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 创建并初始化
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = CGRectMake(0, 0, 200, 200);
self.gradientLayer.position = self.view.center;
self.gradientLayer.borderWidth = 1.f;
[self.view.layer addSublayer:self.gradientLayer];
// 设置颜色
self.gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
// 设置颜色渐变方向
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint = CGPointMake(1, 0);
// 设置颜色分割点
self.gradientLayer.locations = @[@(0.25), @(0.5), @(0.75)];
// 延时3秒钟执行
[self performSelector:@selector(gradientLayerLocationAnimation)
withObject:nil
afterDelay:3.f];
}
- (void)gradientLayerLocationAnimation {
// 颜色分割点效果
self.gradientLayer.locations = @[@(0.01), @(0.5), @(0.99)];
}
@end
色差动画实现
- 确定渐变色渐变方向
- 设定两种颜色，其中一种是透明色，另外一种是自定义颜色
- 设定好location颜色分割点值
- CAGradientLayer的颜色分割点是以0到1的比例来计算的
代码
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer; // 渐变层
@property (nonatomic, strong) NSTimer *timer; // 定时器
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
// 创建背景图片
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bg"]];
imageView.center = self.view.center;
[self.view addSubview:imageView];
// 初始化渐变层
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = imageView.bounds;
[imageView.layer addSublayer:self.gradientLayer];
// 设定颜色渐变方向
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint = CGPointMake(0, 1);
// 设定颜色组
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor redColor].CGColor];
// 设定颜色分割点
self.gradientLayer.locations = @[@(0.5f), @(1.f)];
// 初始化定时器
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.f
target:self
selector:@selector(timerEvent)
userInfo:nil
repeats:YES];
}
- (void)timerEvent {
// 设定颜色组动画
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)];
}
@end
用CAGradientLayer封装带色差动画的View
- 确定几个属性值
- 确定可以做动画的参数
- 重写setter方法做动画
代码
ColorUIImageView.h
#import <UIKit/UIKit.h>
typedef enum : 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
ColorUIImageView.m
#import "ColorUIImageView.h"
@interface ColorUIImageView ()
@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@end
@implementation ColorUIImageView
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 初始化CAGradientLayer
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = self.bounds;
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor redColor].CGColor];
self.gradientLayer.locations = @[@(1), @(1)];
[self.layer addSublayer:self.gradientLayer];
}
return self;
}
#pragma mark - 重写setter，getter方法
@synthesize color = _color;
- (void)setColor:(UIColor *)color {
_color = color;
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)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
ViewController.m
#import "ViewController.h"
#import "ColorUIImageView.h"
@interface ViewController ()
@property (nonatomic, strong) ColorUIImageView *colorView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
self.colorView = [[ColorUIImageView alloc] initWithFrame:CGRectMake(0, 0, 198, 253)];
self.colorView.center = self.view.center;
self.colorView.image = [UIImage imageNamed:@"bg"];
[self.view addSubview:self.colorView];
[self performSelector:@selector(event)
withObject:nil
afterDelay:2.f];
}
- (void)event {
self.colorView.direction = DOWN;
self.colorView.color = [UIColor cyanColor];
self.colorView.percent = 0.5;
}
@end