iOS图层渐变色

概念

• 1，CAGradientLayer用于处理渐变色的层结构
• 2，CAGradientLayer的渐变色可以做隐式动画
• 3，大部分情况下，CAGradientLayer时和CAShapeLayer配合使用的。关于CAShapeLayer可以看我的这篇博客
  基于CAShapeLayer和贝塞尔曲线的圆形进度条动画【原创】
• 4，CAGradientLayer可以用作PNG的遮罩效果

关于CAGradientLayer的坐标系统

• 为什么要提到CAGradientLayer的坐标系统呢？因为渐变色的作用范围，变化梯度的方向，颜色变换的作用点都和CAGradientLayer的坐标系统有关

CAGradientLayer坐标图

• 根据上图的坐标，设定好起点和终点，渐变色的方向就会根据起点指向终点的方向来渐变了。

• 1，CAGradientLayer的坐标系统是从（0，0）到（1，1）绘制的矩形

• 2，CAGradientLayer的frame值的size不为正方形的话，坐标系统会被拉伸

• 3，CAGradientLayer的startPoint和endPoint会直接决定颜色的绘制方向

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

下面直接上代码，里面的注视都写好了。就不一一解释

• 方法1(定时器渐变)

#import "ViewController.h"
 
@interface ViewController ()
 
@property (strong, nonatomic) CAGradientLayer *gradientLayer;
@property (strong, nonatomic) NSTimer *timer;
 
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
     
    //初始化imageView
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
    imageView.frame = CGRectMake(0, 0, self.view.bounds.size.width, 200);
    imageView.center = self.view.center;
    [self.view addSubview:imageView];
     
    //初始化渐变层
    self.gradientLayer = [CAGradientLayer layer];
    self.gradientLayer.frame = imageView.bounds;
    [imageView.layer addSublayer:self.gradientLayer];
     
    //设置渐变颜色方向
    self.gradientLayer.startPoint = CGPointMake(0, 0);
    self.gradientLayer.endPoint = CGPointMake(0, 1);
     
    //设定颜色组
    self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
                                  (__bridge id)[UIColor purpleColor].CGColor];
     
    //设定颜色分割点
    self.gradientLayer.locations = @[@(0.5f) ,@(1.0f)];
     
    //定时器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0f
                                                  target:self
                                                selector:@selector(TimerEvent)
                                                userInfo:nil
                                                 repeats:YES];
}
 
- (void)TimerEvent
{
    //定时改变颜色
    self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
                                  (__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
                                                               green:arc4random() % 255 / 255.0
                                                                blue:arc4random() % 255 / 255.0
                                                               alpha:1.0].CGColor];
     
    //定时改变分割点
    self.gradientLayer.locations = @[@(arc4random() % 10 / 10.0f), @(1.0f)];
}
 
@end

• 封装方法(类似支付宝)

//color gradient layer  
- (void) insertColorGradient {  
      
    UIColor *colorOne = [UIColor colorWithRed:(255/255.0) green:(255/255.0) blue:(255/255.0) alpha:1.0];  
    UIColor *colorTwo = [UIColor colorWithRed:(33/255.0)  green:(33/255.0)  blue:(33/255.0)  alpha:1.0];  
      
    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil nil];  
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];  
    NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];  
      
    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil nil];  
    CAGradientLayer *headerLayer = [CAGradientLayer layer];  
    headerLayer.colors = colors;  
    headerLayer.locations = locations;  
    headerLayer.frame = self.bounds;  
      
    [self.layer insertSublayer:headerLayer above:0];  
      
}

• 封装方法3

//Transparent Gradient Layer  
- (void) insertTransparentGradient {  
    UIColor *colorOne = [UIColor colorWithRed:(33/255.0)  green:(33/255.0)  blue:(33/255.0)  alpha:0.0];  
    UIColor *colorTwo = [UIColor colorWithRed:(33/255.0)  green:(33/255.0)  blue:(33/255.0)  alpha:1.0];  
// 
    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil nil];  
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];  
    NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];  
    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil nil];  
      
    //crate gradient layer
//初始化渐变层  
    CAGradientLayer *headerLayer = [CAGradientLayer layer];  
      
    headerLayer.colors = colors;  
    headerLayer.locations = locations;  
    headerLayer.frame = self.bounds;  
      
    [self.layer insertSublayer:headerLayer atIndex:0];  
}