标签：

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

OCiOS开发：CAGradientLayer 渐变色

标签：

原文地址：http://www.cnblogs.com/YangFuShun/p/5750258.html