如何做一个动起来的渐变色

---

demo.gif

形如上面效果，做一个有形状的渐变色。

用到的控件：
CAGradientLayer -> 展示颜色的渐变效果
CAShapeLayer -> 完成形状部署
NSTimer -> 让颜色动起来

CAGradientLayer部分

- (void)updateCAGLayer {
    
    if (self.cgaLayer) {
        [self.cgaLayer removeFromSuperlayer];
    }
    
    CAGradientLayer *layer = [[CAGradientLayer alloc] init];
    layer.frame = self.bounds;
    layer.startPoint = CGPointMake(0, 0.5);
    layer.endPoint = CGPointMake(1, 0.5);
    
    
    NSMutableArray *colors = [[NSMutableArray alloc] init];
    for (NSInteger deg = 0; deg <= 360; deg += 5) {
        
        UIColor *color;
        color = [UIColor colorWithHue:1.0 * deg / 360.0
                           saturation:0.8
                           brightness:1.0
                                alpha:0.8];
        [colors addObject:(id)[color CGColor]];
    }
    
    layer.colors = colors;
    
    [self.layer addSublayer:layer];
    self.cgaLayer = layer;
}

CAShapeLayer部分

- (void)updateBorrowLayer {
    if (self.shapeLayer) {
        [self.shapeLayer removeFromSuperlayer];
    }
    
    CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    shapeLayer.frame = self.bounds;
    shapeLayer.fillColor = [UIColor whiteColor].CGColor;
    
    CGFloat heightHalf = CGRectGetHeight(shapeLayer.frame) * 0.5;
    CGFloat height = CGRectGetHeight(shapeLayer.frame);
    CGFloat width31 = CGRectGetWidth(shapeLayer.frame) * 0.33;
    CGFloat width32 = CGRectGetWidth(shapeLayer.frame) * 0.66;
    CGFloat width33 = CGRectGetWidth(shapeLayer.frame);
    UIBezierPath *bPath = [UIBezierPath bezierPath];
    
    [bPath moveToPoint:CGPointMake(0, heightHalf)];
    [bPath addLineToPoint:CGPointMake(width31, 0)];
    [bPath addLineToPoint:CGPointMake(width31, height)];
    [bPath moveToPoint:CGPointMake(width31, heightHalf)];
    [bPath addLineToPoint:CGPointMake(width32, 0)];
    [bPath addLineToPoint:CGPointMake(width32, height)];
    [bPath moveToPoint:CGPointMake(width32, heightHalf)];
    [bPath addLineToPoint:CGPointMake(width33, 0)];
    [bPath addLineToPoint:CGPointMake(width33, height)];
    shapeLayer.path = bPath.CGPath;
    [self.layer addSublayer:shapeLayer];
    self.shapeLayer = shapeLayer;

    [self.layer setMask:shapeLayer];
}

最后面mask的设置是形状显示的关键。

NSTime部分

- (void)startTimer {
    if (self.timer) return;
    self.timer = [NSTimer scheduledTimerWithTimeInterval:0.04 target:self selector:@selector(timerFunc) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:self.timer forMode:NSRunLoopCommonModes];
}

- (void)stopTimer {
    if (!self.timer) return;
    [self.timer invalidate];
    self.timer = nil;
}

// 颜色循环移动 设置颜色数组的排列
- (void)timerFunc {
    CAGradientLayer *gradientLayer = self.cgaLayer;
    NSMutableArray *copyArray = [NSMutableArray arrayWithArray:[gradientLayer colors]];
    UIColor *lastColor = [copyArray lastObject];
    [copyArray removeLastObject];
    if (lastColor) {
        [copyArray insertObject:lastColor atIndex:0];
    }
    [self.cgaLayer setColors:copyArray];
}

---