iOS之UI--CAGradientLayer 的使用

1、CAGradientLayer 简介

如果说CAShapeLayer是用于提供设置形状的，那么CAGradientLayer是用于提供设置颜色的

英语单词：Gradient：

• CAGradientLayer简介

  • CAGradientLayer是用于处理渐变色的层结构
  • CAGradientLayer的渐变色可以做隐式动画
  • 大部分情况下，CAGradientLayer都是与CAShapeLayer配合使用的
  • CAGradientLayer可以用作png遮罩效果

• 使用CAGradientLayer主要的方法

  • locations 设置颜色分割点的数组
  • startPoint 坐标系统的起点 
  • endPoint 坐标系统的终止点
    • startPoint和endPoint的起止点范围(0,0)~(1,1)
  • colors 颜色值数组，颜色个数 >=2 才有用

下面展示几个关于CAGradientLayer的效果图。

最后给出YouXianMing老师的四个关于CAGradientLayer的Example Code下载链接: http://pan.baidu.com/s/1eR0Q7Hw 密码: 7zvm

2、CAGradientLayer 坐标系统

• CAGradientLayer的坐标系统是从坐标（0，0）到（1，1）绘制的矩形
• CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸
• CAGradientLayer的startPoint与endPoint会直接影响颜色的绘制方向
• CAGradientLayer的颜色分割点割点是以0到1的比例来计算的 

• 个人分析:
  • 当"颜色的个数 = 设置颜色分割点的个数 + 1"，是最大有效渐变颜色设置的数量关系
  • 当"颜色的个数 > 设置颜色分割点的个数 + 1"，会出现多余的颜色不显示在屏幕上
  • 当"颜色的个数 < 设置颜色分割点的个数 + 1"，多余的分割点无用

用于体会的源码

#import "CAGradientLayerController.h"

#define ScreenWidth  [UIScreen mainScreen].bounds.size.width
#define ScreenHeight [UIScreen mainScreen].bounds.size.height

@interface CAGradientLayerController ()

/** GradientLayer */
@property (nonatomic,weak)CAGradientLayer *gradientLayer;
@property (nonatomic,weak)CAGradientLayer *gradientLayer2;

@end

@implementation CAGradientLayerController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 第一个layer
    NSArray* colors =  @[(__bridge id)[UIColor redColor].CGColor,
                             (__bridge id)[UIColor blueColor].CGColor];
    self.gradientLayer = [self addGradientLayerWithFrame:CGRectMake(ScreenWidth * 0.5 - 100, 50, 200, 100) colors:colors locations:nil];
    
    // 第二个layer
    NSArray* colors2 =  @[(__bridge id)[UIColor redColor].CGColor,
                         (__bridge id)[UIColor blueColor].CGColor];
    NSArray* locations2 = @[@(0.5),@(0.75)];
    
    self.gradientLayer = [self addGradientLayerWithFrame:CGRectMake(ScreenWidth * 0.5 - 100, 170, 200, 100) colors:colors2 locations:locations2];
    
    // 第三个layer
    NSArray* colors3 =  @[(__bridge id)[UIColor redColor].CGColor,
                          (__bridge id)[UIColor greenColor].CGColor,
                          (__bridge id)[UIColor blueColor].CGColor];
    NSArray* locations3 = @[@(0),@(0.5)];
    
    self.gradientLayer = [self addGradientLayerWithFrame:CGRectMake(ScreenWidth * 0.5 - 100, 290, 200, 100) colors:colors3 locations:locations3];
    
    // 第四个layer
    NSArray* colors4 =  @[(__bridge id)[UIColor blackColor].CGColor,//黑色
                          (__bridge id)[UIColor whiteColor].CGColor,//白色
                          (__bridge id)[UIColor greenColor].CGColor,//绿色
                          (__bridge id)[UIColor blueColor].CGColor, //蓝色
                          (__bridge id)[UIColor grayColor].CGColor, //灰色
                          (__bridge id)[UIColor brownColor].CGColor //棕色
                          ];
    NSArray* locations4 = @[@(0.25),@(0.5),@(0.75),@(0.85)];
    /*
     * 0~0.25    黑色◎
     * 0.25~0.5  黑色↓ 白色↑
     * 0.5~0.75  白色↓ 绿色↑
     * 0.75~0.85 绿色↓ 蓝色↑
     * 0.85~1.0  蓝色↓ 灰色↑
     * 因为到1.0就结束了，所以棕色就是多余的了
     */
    
    self.gradientLayer = [self addGradientLayerWithFrame:CGRectMake( 2, 410, ScreenWidth - 4, 100) colors:colors4 locations:locations4];
    

}
-(CAGradientLayer*)addGradientLayerWithFrame:(CGRect)frame colors:(NSArray<NSNumber*>*)colors locations:(NSArray<NSNumber*>*)locations {
    CAGradientLayer* gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = frame;
    gradientLayer.colors = colors;
    gradientLayer.locations = locations;
    gradientLayer.borderWidth = 1.0f;
    
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 0);
    
    [self.view.layer addSublayer:gradientLayer];
    return gradientLayer;
}

@end

3、色差动画的实现

• 确定渐变色渐变方向
• 设定两种颜色，其中一种是透明色，另外一种是自定义颜色
• 设定好location颜色分割点值

• CAGradientLayer的颜色分割点是以0到1的比例来计算的

• 补充：

  • arc4random()是随机生成任意数值，所以arc4random() % 99这个求余的式子表示求出0~99之间的余数，所以通过这种类似的求余式子来设置产生）0~99之间的随机数。
  • 如果要设置0~1之间的按照自定义的精细度设置范围：
    • 比如我需要将0~1拆分为255份，那么就要arc4random() % 255 / 255.0f
    • 比如我需要将0~1拆分为10份， 那么就要arc4random() % 10 / 10.0f

• 注意：

  • 如果后面 / 10.0f没有 .0f 而是直接 / 10的话，会出问题的。

#import "CAGradientLayerController.h"

#define ScreenWidth  [UIScreen mainScreen].bounds.size.width
#define ScreenHeight [UIScreen mainScreen].bounds.size.height

@interface CAGradientLayerController ()

/** GradientLayer */
@property (nonatomic,weak)CAGradientLayer *gradientLayer;
/** Timer */
@property (nonatomic,strong)NSTimer *timer;

@end

@implementation CAGradientLayerController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 添加背景
    UIImageView* imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bg"]];
    imageView.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
    [self.view addSubview:imageView];
    
    // 添加色差层
    NSArray* colors = @[(__bridge id)[UIColor clearColor].CGColor,
                        (__bridge id)[UIColor clearColor].CGColor];
    NSArray* locations = @[@(0)];
    
    self.gradientLayer = [self addGradientLayerWithFrame:imageView.frame colors:colors locations:locations];
    
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0f
                                                  target:self
                                                selector:@selector(changeGradientColor)
                                                userInfo:nil
                                                 repeats:YES];
}
-(void)changeGradientColor{
    self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
                                  (__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0f
                                                               green:arc4random() % 255 / 255.0f
                                                                blue:arc4random() % 255 / 255.0f
                                                               alpha:1].CGColor];
    //self.gradientLayer.locations = @[@(arc4random() % 10 / 10.0f)];
    //这个效果不好，效果是直接铺盖上去的，但是下面一种情况，是形变也是有过程的。
    self.gradientLayer.locations = @[@(arc4random() % 10 / 10.0f),@(1.0f)];
}

-(CAGradientLayer*)addGradientLayerWithFrame:(CGRect)frame colors:(NSArray<NSNumber*>*)colors locations:(NSArray<NSNumber*>*)locations {
    CAGradientLayer* gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = frame;
    gradientLayer.colors = colors;
    gradientLayer.locations = locations;
    gradientLayer.borderWidth = 1.0f;
    
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    
    [self.view.layer addSublayer:gradientLayer];
    return gradientLayer;
}

@end

4、用 CAGradientLayer 封装带色差动画的 View

• 确定几个属性值
• 确定可以做动画的参数

• 重写setter方法做动画

• 对外的需求：

  • 属性：
    • 设置上下左右色差方向(用枚举设置该属性direction)
    • 色差颜色(color)
    • 颜色占位百分比(percent)

效果图：

源码在github上：https://github.com/HeYang123456789/UIView

iOS之UI--CAGradientLayer 的使用

原文：http://www.cnblogs.com/goodboy-heyang/p/5185595.html