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