iOS之UI--CAGradientLayer

 

1、CAGradientLayer 简介

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

英语单词：Gradient：梯度，渐变 

那么Gradient Layer就是渐变层的意思了。

• 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