利用CAGradientLayer绘制颜色渐变动画

之前项目中，UI设计师要求金融理财模块做成如下效果图:

其中有涉及相应的动画 比如类似进度条图层颜色渐变动画，现将实现记录如下：

图层颜色渐变主要通过CAGradientLayer这个类进行实现

自定义一个控制器用来展示图层渐变动画
在此控制器中声明如下属性

//开启动画@property (nonatomic,strong) UIButton *startAnimationBtn;//显示动画的View@property (nonatomic,strong) UIView *animationView;//渐变图层@property (nonatomic,strong) CALayer *gradientLayer;//轨迹图层@property (nonatomic,strong) CAShapeLayer *progressLayer;

gradientLayer 懒加载实现代码如下：

- (CALayer *)gradientLayer {    if (!_gradientLayer) {        _gradientLayer = [CALayer layer];        _gradientLayer.frame = CGRectMake(0, 0, kWidth, kHeight);        CAGradientLayer *gradientLayer1 =  [CAGradientLayer layer];        gradientLayer1.frame = CGRectMake(0, 0, kWidth/2, kHeight);        [gradientLayer1 setColors:[NSArray arrayWithObjects:(id)[UIColor colorFromHexString:@"#2d75f0"].CGColor,(id)[UIColor colorFromHexString:@"#4888f2"].CGColor, nil]];        //渐变方向 从下往上        [gradientLayer1 setStartPoint:CGPointMake(0.5, 1)];        [gradientLayer1 setEndPoint:CGPointMake(0.5, 0)];        [_gradientLayer addSublayer:gradientLayer1];        CAGradientLayer *gradientLayer2 =  [CAGradientLayer layer];        gradientLayer2.frame = CGRectMake(kWidth/2, 0, kWidth/2, kHeight);        [gradientLayer2 setColors:[NSArray arrayWithObjects:(id)[UIColor colorFromHexString:@"#4888f2"].CGColor,(id)[UIColor colorFromHexString:@"#46ddef"].CGColor, nil]];        //渐变方向 从上往下        [gradientLayer2 setStartPoint:CGPointMake(0.5, 0)];        [gradientLayer2 setEndPoint:CGPointMake(0.5, 1)];        [_gradientLayer addSublayer:gradientLayer2];        //用progressLayer来截取渐变层//        [_gradientLayer setMask:self.progressLayer];    }    return _gradientLayer;}

CAGradientLayer 主要是实现图层渐变的一个类，它的使用很简单。
设置要渐变的颜色

[gradientLayer2 setColors:[NSArray arrayWithObjects:(id)[UIColor colorFromHexString:@"#4888f2"].CGColor,(id)[UIColor colorFromHexString:@"#46ddef"].CGColor, nil]];

设置渐变的起点跟结束点

[gradientLayer1 setStartPoint:CGPointMake(0.5, 1)];[gradientLayer1 setEndPoint:CGPointMake(0.5, 0)];

如果将渐变图层直接添加到animationView的layer上显示效果如下：

//将渐变图层添加到animationView的图层上    [self.animationView.layer addSublayer:self.gradientLayer];

此时还没有动效也没有达到截取成圆的效果
要按照自己制定好的路径截取成圆，想到了CAShapeLayer这个类，这个类图层创建没有规定的形状，而是要自己定义一个path 让它按照path画出想要的形状，这里就结合了UIBezierPath类的使用，制定好贝赛尔曲线路径，画出颜色渐变的圆。

由于设计师要求绘制不完整的圆，所以绘制中，圆的起点，跟结束点有一定的弧度偏差，具体弧度如下：

#define degreesToRadians(x) (180 * (x)/M_PI) //把角度转换成PI的方式。 比如：degreesToRadians(90 - gapDegree/2)，所以x一定要加括号。#define halfGapRadian degreesToRadians(43)

- (CAShapeLayer *)progressLayer {    if (!_progressLayer) {        CGFloat lineWidth = 13.0;        CGFloat radius = kWidth/2 - lineWidth/2;        //图层画圆的轨迹        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(kWidth/2, kWidth/2) radius:radius startAngle:-M_PI_2*3 + halfGapRadian endAngle:M_PI_2-halfGapRadian clockwise:YES];        _progressLayer = [CAShapeLayer layer];        _progressLayer.path = path.CGPath;        _progressLayer.lineWidth = lineWidth;        _progressLayer.lineCap = @"round";        _progressLayer.strokeColor = [UIColor whiteColor].CGColor;        //将路径填充颜色设置为透明        _progressLayer.fillColor = [UIColor clearColor].CGColor;    }    return _progressLayer;}

在gradientLayer的懒加载中加上如下一句代码：

[_gradientLayer setMask:self.progressLayer];

用progressLayer来截取渐变层，实现了颜色渐变圆的效果

现在已经是能够画出颜色渐变的圆了，但是没有加载过程的动画
想要让颜色渐变的圆 按照进度 在规定的时间画成圆，我想到的是利用CABasicAnimation类，来实现基本动画，实现代码如下：

//将渐变图层添加到animationView的图层上    [self.animationView.layer addSublayer:self.gradientLayer];    //动画时间    CGFloat duration = 1.0;    //进度程度    CGFloat progress = 1.0;    //strokeEnd 动画到某个点结束    CABasicAnimation *anim1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];    anim1.removedOnCompletion = NO;    anim1.fillMode = kCAFillModeBoth;    anim1.duration = duration;    anim1.fromValue = @0.0;    anim1.toValue = @(progress);    //为图层添加动画    [self.progressLayer addAnimation:anim1 forKey:@"anim1"];

通过CABasicAnimation基本动画，利用keyPath “strokeEnd”从起点0，在规定的1.0秒内画圆到指定的prrogress进度，实现了动画绘制颜色渐变圆。
CABasicAnimation的动画执行需要在贝塞尔轨迹绘制的图层上，也就是为progressLayer 添加动画。

[self.progressLayer addAnimation:anim1 forKey:@"anim1"];

以上便是项目中实现动画绘制颜色渐变的圆的过程。