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
