iOS环型进度条颜色渐变

公司最近要开发新版本了，其中有一个效果是环型进度条颜色渐变，查找了一些资料，打算把具体实现过程说一说。

效果图：

poi 上午8.53.21.gif

• 1、 使用的技术
  pop：用来实现文字变化的动态效果
  CAShapeLayer： 用来绘制背景圆环和进度圆环
  CAGradientLayer：渐变图层，添加渐变颜色

• 2、自定义一个view，将进度作为属性与外界进行连接

#import <UIKit/UIKit.h>

@interface Circle : UIView
///项目进度
@property (nonatomic,assign) CGFloat progress;

@end

.m 实现过程

#import "Circle.h"
#import <POP.h>
#define SELF_WIDTH CGRectGetWidth(self.bounds)
#define SELF_HEIGHT CGRectGetHeight(self.bounds)
#define DEGREES_TO_RADOANS(x) (M_PI * (x) / 180.0) // 将角度转为弧度
#define Duration 3  //动画时长
#define LineWidth 8.0   //线宽
#define LittleLineWidth 2.0
#define LittleCycleScale 2.2  //小线圈的缩放倍数
@interface Circle ()
///进度条
@property (nonatomic,strong) CAShapeLayer *progressLayer;
///小进度条
@property (nonatomic,strong) CAShapeLayer *littleProgressLayer;
///背景条
@property (nonatomic,strong) CAShapeLayer *backgroundLayer;
///显示进度的label
@property (nonatomic,strong) UILabel *progressLabel;
///渐变色图层
@property (nonatomic,strong) CALayer *gradientLayer;

@end
@implementation Circle

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame: frame];
    if (self) {
        self.backgroundColor = [UIColor colorWithRed:38.0 / 255.0 green:130.0 / 255.0 blue:213.0 / 255.0 alpha:0.5];
        [self setupLabel];
        [self setupBackgroundLayer];
        [self setupProgressLayer];
        
        //默认0,我们需要从90°开始,所以将view旋转
        self.transform = CGAffineTransformRotate(self.transform, -M_PI_2);
    }
    return self;
}

- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    [self drawLineAnimation:self.progressLayer progress:progress];
    [self drawLineAnimation:self.littleProgressLayer progress:progress];
    
    //文字动态变化
    POPBasicAnimation *anim = [POPBasicAnimation animation];
    anim.duration = progress * Duration;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    POPAnimatableProperty * prop = [POPAnimatableProperty propertyWithName:@"count" initializer:^(POPMutableAnimatableProperty *prop) {
        // read value
        prop.readBlock = ^(id obj, CGFloat values[]) {
            values[0] = [[obj description] floatValue];
        };
        // write
        prop.writeBlock = ^(id obj, const CGFloat values[]) {
            [obj setText:[NSString stringWithFormat:@"%.0f%%",values[0]]];
        };
        //力学阈值
        prop.threshold = 1;
    }];
    anim.property = prop;
    anim.fromValue = @(0.0);
    anim.toValue = @(progress * 100);
    [self.progressLabel pop_addAnimation:anim forKey:@"count"];
    
}

/**
    进度文字
 */
- (void)setupLabel {
    self.progressLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, SELF_WIDTH - 20, 40)];
    self.progressLabel.center = CGPointMake(SELF_WIDTH / 2, SELF_HEIGHT / 2);
    self.progressLabel.textAlignment = NSTextAlignmentCenter;
    self.progressLabel.font = [UIFont systemFontOfSize:15];
    self.progressLabel.transform = CGAffineTransformRotate(self.progressLabel.transform, M_PI_2);
    [self addSubview:self.progressLabel];
}


/**
 设置进度条
 */
- (void)setupProgressLayer {
    self.progressLayer = [self generateLayerWhitLineWidth:LineWidth cgrect:CGRectMake(LineWidth / 2, LineWidth / 2, self.bounds.size.width - LineWidth, self.bounds.size.height - LineWidth)];
    self.littleProgressLayer = [self generateLayerWhitLineWidth:LittleCycleScale cgrect:CGRectMake(LineWidth * LittleCycleScale, LineWidth * LittleCycleScale, self.bounds.size.width - LineWidth * LittleCycleScale * 2, self.bounds.size.height - LineWidth * LittleCycleScale * 2)];
    
    [self creatGradientWithShapeLayer:self.progressLayer];
    [self creatGradientWithShapeLayer:self.littleProgressLayer];
    
}
///生成渐变色
- (void)creatGradientWithShapeLayer:(CAShapeLayer *)shapelayer {
    //生成渐变色
    self.gradientLayer = [CALayer layer];
    self.gradientLayer.frame = self.bounds;
    [self.layer addSublayer:self.gradientLayer];
    
    //渐变色
    CAGradientLayer *contentLayer = [CAGradientLayer layer];
    contentLayer.frame = CGRectMake(0, 0, self.bounds.size.width , self.bounds.size.height);  // 分段设置渐变色
    //    leftLayer.locations = @[@0, @0.3,@0.6, @1];
    contentLayer.colors = @[(id)[UIColor greenColor].CGColor, (id)[UIColor blueColor].CGColor];
    [self.gradientLayer addSublayer:contentLayer];
    
    [self.gradientLayer setMask:shapelayer];
    shapelayer.strokeColor = [UIColor whiteColor].CGColor;
}

/**
 设置环型背景
 */
- (void)setupBackgroundLayer {
    self.backgroundLayer = [self generateLayerWhitLineWidth:LineWidth cgrect:CGRectMake(LineWidth / 2, LineWidth / 2, self.bounds.size.width - LineWidth , self.bounds.size.height - LineWidth)];
//    bgLayer.position = self.center;//居中显示
    self.backgroundLayer.strokeColor = [UIColor grayColor].CGColor;//线条颜色
    self.backgroundLayer.strokeStart = 0.f;//路径开始位置
    self.backgroundLayer.strokeEnd = 1.f;//路径结束位置
}

/**
 环型背景和进度条(包括小进度条)可以封装成同一个方法

 @return 环形条
 */
- (CAShapeLayer *)generateLayerWhitLineWidth:(CGFloat)lineWidth cgrect:(CGRect)cgrect {
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame = self.bounds;
    layer.lineCap = kCALineCapRound;//线样式
    layer.lineWidth = lineWidth;
    layer.fillColor = [UIColor clearColor].CGColor;//填充色
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:cgrect];
    layer.path = path.CGPath;
    [self.layer addSublayer:layer];
    return  layer;

}


/**
 设置动画效果
 
 @param layer 进度条layer
 @param progress 设置的进度
 */
-(void)drawLineAnimation:(CALayer*)layer progress:(CGFloat)progress{
    POPBasicAnimation *bas = [POPBasicAnimation animationWithPropertyNamed:kPOPShapeLayerStrokeEnd];
    //动画时间
    bas.duration = progress * Duration;
    //控制动画节奏
    bas.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    bas.delegate=self;
    bas.removedOnCompletion = NO;
    bas.fromValue = @(0);
    bas.toValue = [NSNumber numberWithFloat:self.progress];
    [layer pop_addAnimation:bas forKey:@""];
    
}


@end

只要在控制器中初始化Circle，并添加到view中就可以实现上面的效果了。至于渐变颜色及线宽可以根据项目进行设置。