CAGradientLayer簡單的理解就是漸變層，圖層繪制通過GPU可以加速渲染速度，colors和locations是需要注意的地方，Colors填充的漸變顏色，locations是漸變位置結(jié)束的位置；漸變的區(qū)域通過startPoint和endPoint控制，采用單位坐標(biāo)系，位置從0到1，關(guān)于漸變層的介紹有很多，先來看一組基礎(chǔ)的漸變效果:

Gradient1-FlyElephant.gif

基礎(chǔ)漸變

最上面的圖層漸變

  //FlyElephant
  CAGradientLayer *gradientLayer = [CAGradientLayer layer];
  gradientLayer.frame    =CGRectMake(80, 80, 200, 80);
  gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                        (__bridge id)[UIColor greenColor].CGColor,
                        (__bridge id)[UIColor yellowColor].CGColor,
                        (__bridge id)[UIColor blueColor].CGColor];

  gradientLayer.locations  = @[@(0.2), @(0.4), @(0.6),@(0.8)];
  gradientLayer.startPoint = CGPointMake(0, 0);
  gradientLayer.endPoint   = CGPointMake(0, 1);
  [self.view.layer addSublayer:gradientLayer];

第一種漸變比較明顯，下面的漸變顏色現(xiàn)金不會(huì)像最上面那么夸張:

    //FlyElephant
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.frame    =CGRectMake(80, 170, 200, 40);
    gradientLayer1.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor purpleColor].CGColor];
    
    gradientLayer1.locations  = @[@(0.5),@(1.0)];
    gradientLayer1.type = kCAGradientLayerAxial;
    gradientLayer1.startPoint = CGPointMake(0, 0);
    gradientLayer1.endPoint   = CGPointMake(0, 1);
    [self.view.layer addSublayer:gradientLayer1];

中間一張諾維茨基的圖片其實(shí)是加了漸變顏色的，注意分割線第一個(gè)點(diǎn)是負(fù)數(shù):

    self.personImgView.clipsToBounds=YES;
    CAGradientLayer *gradientLayer3= [CAGradientLayer layer];
    gradientLayer3.frame    =self.personImgView.bounds;
    gradientLayer3.colors = @[(__bridge id)[UIColor blackColor].CGColor,(__bridge id)[UIColor clearColor].CGColor];
    
    gradientLayer3.locations  = @[@(-2),@(1)];
    gradientLayer3.type = kCAGradientLayerAxial;
    gradientLayer3.startPoint = CGPointMake(0, 0);
    gradientLayer3.endPoint   = CGPointMake(0, 1);
    gradientLayer3.type = kCAGradientLayerAxial;
    [self.personImgView.layer addSublayer:gradientLayer3];

估計(jì)大家會(huì)對(duì)最后兩種彩色的漸變更有興趣一點(diǎn)，Web網(wǎng)站和App有的會(huì)使用這兩種效果做進(jìn)度條顯示，第一種是通過mask控制顯示位置，第二種是通過Timer不斷的變換Layer的整體的變換顏色，有個(gè)小邏輯在里面是
①初始顏色：紅色→藍(lán)色→黃色
②顏色切換：黃色→紅色→藍(lán)色

    self.progressLayer=[CAGradientLayer layer];
    self.progressLayer.frame=CGRectMake(0, 500, [UIScreen mainScreen].bounds.size.width, 2);
    [self setupProgress:self.progressLayer];
    [self.view.layer addSublayer:self.progressLayer];
    
    self.progressGradientLayer=[CAGradientLayer layer];
    self.progressGradientLayer.frame=CGRectMake(0, 520, [UIScreen mainScreen].bounds.size.width, 2);
    [self setupProgress:self.progressGradientLayer];
    [self.view.layer addSublayer:self.progressGradientLayer];
    
    self.progressMaskLayer=[CALayer layer];
    self.progressMaskLayer.backgroundColor=[UIColor blackColor].CGColor;
    self.progressMaskLayer.frame=CGRectMake(0, 0, 0, 2);

    self.timer=[NSTimer scheduledTimerWithTimeInterval:0.3 target:self selector:@selector(updateProgress) userInfo:nil repeats:YES];
    self.timer.fireDate=[[NSDate date] dateByAddingTimeInterval:1];
    
    self.gradientTimer=[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(progressGradient) userInfo:nil repeats:YES];
    self.gradientTimer.fireDate=[[NSDate date] dateByAddingTimeInterval:1];

NSTimer更新:

-(void)setupProgress:(CAGradientLayer *)layer {
    layer.startPoint=CGPointMake(0.0, 0.5);
    layer.endPoint=CGPointMake(1.0, 0.5);
    
    NSMutableArray *colors = [NSMutableArray array];
    for (NSInteger hue = 0; hue <= 360; hue += 5)
    {
        UIColor * color = [UIColor colorWithHue:1.0 * hue / 360
                                     saturation:1.0
                                     brightness:1.0
                                          alpha:1.0];
        [colors addObject:(id)[color CGColor]];
    }
    layer.colors=[NSArray arrayWithArray:colors];
}

-(void)updateProgress {
    self.progress+=0.1;
    if (self.progress>=1) {
        [self.timer invalidate];
        return;
    }
    CGRect frame=self.progressLayer.bounds;
    frame.size.width=frame.size.width*self.progress;
    self.progressMaskLayer.frame=frame;
    self.progressLayer.mask=self.progressMaskLayer;
}

-(void)progressGradient {
    NSMutableArray * colorArray = [[self.progressGradientLayer colors] mutableCopy];
    UIColor * lastColor = [colorArray lastObject];
    [colorArray removeLastObject];
    [colorArray insertObject:lastColor atIndex:0];
    NSArray * shiftedColors = [NSArray arrayWithArray:colorArray];
    
    [self.progressGradientLayer setColors:shiftedColors];
    
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"colors"];
    [animation setToValue:shiftedColors];
    [animation setDuration:0.1];
    [animation setFillMode:kCAFillModeForwards];
    [animation setDelegate:self];
    [self.progressGradientLayer addAnimation:animation forKey:@"animateGradient"];
}

特殊效果

Gradient2.gif

第一種類似于push推動(dòng)的效果:

-(void)setupGradientPush {
    self.pushLayer= [CAGradientLayer layer];
    self.pushLayer.backgroundColor = [UIColor blueColor].CGColor;
    self.pushLayer.frame    =CGRectMake(240, 80, 120, 100);
    //顏色分割線
    self.pushLayer.locations  = @[@(self.pushProgress-0.1), @(self.pushProgress-0.05), @(self.pushProgress)];
    // 顏色
    self.pushLayer.colors = @[(__bridge id)[UIColor yellowColor].CGColor,
                              (__bridge id)[UIColor purpleColor].CGColor,
                              (__bridge id)[UIColor redColor].CGColor];
    
    self.pushLayer.startPoint = CGPointMake(0, 0);
    self.pushLayer.endPoint   = CGPointMake(1, 0);
    [self.view.layer addSublayer:self.pushLayer];
    
    self.pushTimer=[NSTimer scheduledTimerWithTimeInterval:0.2 target:self selector:@selector(gradientPush) userInfo:nil repeats:YES];
    self.pushTimer.fireDate=[[NSDate date] dateByAddingTimeInterval:3];
}

-(void)gradientPush {
    self.pushProgress+=0.1;
    if (self.pushProgress >= 1)
    {
        self.pushLayer.locations  = @[@(-0.1), @(-0.05), @(0)];
        [self.pushTimer invalidate];
        return;
    }
    self.pushLayer.locations  = @[@(self.pushProgress-0.1), @(self.pushProgress-0.05), @(self.pushProgress)];
}

第二個(gè)那個(gè)圓的漸變?nèi)绻堑谝淮尾⒉荒芰⒓聪氲绞菨u變色完成的效果，如果思路不是很清楚，先看下下面這張圖:

Gradient3.gif

默認(rèn)的漸變是有顏色，其實(shí)和結(jié)束是一種顏色，中間是白色，我們通過mask將矩形的輪廓設(shè)置為空心圓，就可以看到第一張圖的效果:

-(void)setupCircle {
    CGFloat width=120;
    CGFloat radius=width/2;
    
    CAGradientLayer *circleLayer = [CAGradientLayer layer];
    circleLayer.frame    =CGRectMake(20, 200, width+4, width+4);
    
    
    circleLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                           (__bridge id)[UIColor whiteColor].CGColor,
                           (__bridge id)[UIColor redColor].CGColor];
    // 顏色分割點(diǎn)
    circleLayer.locations  = @[@(-0.2), @(-0.1), @(0)];
    circleLayer.startPoint = CGPointMake(0, 0);
    circleLayer.endPoint   = CGPointMake(1, 0);
    
    CAShapeLayer *shapelayer = [CAShapeLayer layer];
    shapelayer.frame=circleLayer.bounds;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius+2, radius+2)
                                                        radius:radius
                                                    startAngle:0
                                                      endAngle:M_PI*2
                                                     clockwise:YES];
    
    shapelayer.path = path.CGPath;
    
    // 設(shè)置填充顏色為透明,若設(shè)置為其他顏色將顯示漸變層的顏色
    shapelayer.fillColor = [UIColor clearColor].CGColor;
    
    shapelayer.strokeColor = [UIColor redColor].CGColor;
    shapelayer.strokeEnd = 1.0f;
    [self.view.layer addSublayer:circleLayer];
    
    circleLayer.mask = shapelayer;
    
    self.circleLayer=circleLayer;
    
    self.circleTimer=[NSTimer scheduledTimerWithTimeInterval:CircleDuration target:self selector:@selector(gradientCircle) userInfo:nil repeats:YES];
    self.circleTimer.fireDate=[[NSDate date] dateByAddingTimeInterval:2];
}

-(void)gradientCircle{
    CABasicAnimation *rotationAnim = [CABasicAnimation animationWithKeyPath:@"locations"];
    rotationAnim.fromValue = @[@(-0.2), @(-0.1), @(0)];
    rotationAnim.toValue   = @[@(1.0), @(1.1), @(1.2)];
    rotationAnim.duration  = CircleDuration;
    [self.circleLayer addAnimation:rotationAnim forKey:@"rotationAnim"];
}

最后一個(gè)圖也非常有意思，這個(gè)有點(diǎn)躲貓貓的意思，兩張圖片在同一個(gè)位置，第一個(gè)圖片是荷葉，第二個(gè)裸背，通過mask只顯示第二張圖片，加入動(dòng)畫，改變漸變層的位置:

-(void)setupGirl {
    CGSize screenSize=[[UIScreen mainScreen] bounds].size;
    CGRect imgRect=CGRectMake(0, 360,screenSize.width, screenSize.height-360);
    self.bgImageView=[[UIImageView alloc]initWithFrame:imgRect];
    self.bgImageView.image=[UIImage imageNamed:@"Girl"];
    self.bgImageView.contentMode=UIViewContentModeScaleAspectFill;
    self.bgImageView.clipsToBounds=YES;
    [self.view addSubview:self.bgImageView];
    
    self.frontImgView=[[UIImageView alloc]initWithFrame:imgRect];
    self.frontImgView.image=[UIImage imageNamed:@"Girl1"];
    self.frontImgView.contentMode=UIViewContentModeScaleAspectFill;
    self.frontImgView.clipsToBounds=YES;
    [self.view addSubview:self.frontImgView];
    

    self.imgMaskLayer= [CAGradientLayer layer];
    self.imgMaskLayer.frame    =self.frontImgView.bounds;
    self.imgMaskLayer.backgroundColor=[UIColor clearColor].CGColor;
    
    self.frontImgView.layer.mask=self.imgMaskLayer;
    
    self.imgLeftLayer=[CAGradientLayer layer];
    self.imgLeftLayer.frame = CGRectMake(0, 0, screenSize.width/2, screenSize.height*3);
    self.imgLeftLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
                           (__bridge id)[UIColor blackColor].CGColor];
    self.imgLeftLayer.locations =@[@(0.5)];
    self.imgLeftLayer.startPoint =CGPointMake(0.5, 0.3);
    self.imgLeftLayer.endPoint = CGPointMake(0.5, 0.6);
    
    [self.imgMaskLayer addSublayer:self.imgLeftLayer];
    
    
    self.imgRightLayer=[CAGradientLayer layer];
    self.imgRightLayer.frame = CGRectMake(screenSize.width/2, 0, screenSize.width/2, screenSize.height*3);
    self.imgRightLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
                                 (__bridge id)[UIColor blackColor].CGColor];
    self.imgRightLayer.locations =@[@(0.5)];
    self.imgRightLayer.startPoint =CGPointMake(0.5, 0.3);
    self.imgRightLayer.endPoint = CGPointMake(0.5, 0.6);
    [self.imgMaskLayer addSublayer:self.imgRightLayer];
    
    [self setupShimmer];
}

-(void)setupShimmer {
    CGSize screenSize=[[UIScreen mainScreen] bounds].size;
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(CircleDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];
        basicAnimation.fromValue=[NSValue valueWithCGPoint:self.imgLeftLayer.position];
        basicAnimation.toValue=[NSValue valueWithCGPoint:CGPointMake(self.imgLeftLayer.position.x,-screenSize.height)];
        basicAnimation.duration=1.5f;
        basicAnimation.removedOnCompletion=false;
        basicAnimation.fillMode=kCAFillModeForwards;
        [self.imgLeftLayer addAnimation:basicAnimation forKey:@"LeftPosition"];
    });
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)((CircleDuration+1.5)* NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"position"];
        basicAnimation.fromValue=[NSValue valueWithCGPoint:self.imgRightLayer.position];
        basicAnimation.toValue=[NSValue valueWithCGPoint:CGPointMake(self.imgRightLayer.position.x,-screenSize.height/2)];
        basicAnimation.duration=1.5;
        basicAnimation.removedOnCompletion=false;
        basicAnimation.fillMode=kCAFillModeForwards;
        [self.imgRightLayer addAnimation:basicAnimation forKey:@"RightPosition"];
    });
}

基本上常見的CAGradientLayer已經(jīng)實(shí)現(xiàn)，如果有其他效果歡迎探討
GitHub地址:FELayerAnimation-FlyElephant