一、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 = [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)];
}
四、用CAGradientLayer实现带色差动画的View
1、确定几个属性值
2、确定可以做动画的参数
3、重写setter方法做动画
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
#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
#import "ColorUIImageView.h"
@interface ViewController ()
@property (nonatomic, strong) ColorUIImageView *colorView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
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:1.f];
}
- (void)event {
self.colorView.direction = DOWN;
self.colorView.color = [UIColor cyanColor];
self.colorView.percent = 0.5;
}
@end
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文地址：http://blog.csdn.net/baitxaps/article/details/46940039
