iOS圆形进度条、带渐变

圆形进度条

QQ20170726-151612.gif

1，画圆：CAShapeLayer与UIBezierPath配合使用

CAShapeLayer 是 CALayer 的子类，她比 CALayer 更灵活，可以画出各种图形，最简单就是和UIBezierPath配合使用。

例（画矩形）：

矩形


@interface CycleView : UIView
@property(nonatomic,strong)CAShapeLayer * progressLayer;
@property(nonatomic,assign)float progress;
@end


#define PROGRESS_LINE_WIDTH 4 //弧线的宽度
#define RYUIColorWithRGB(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1]
#import "CycleView.h"
@implementation CycleView
       //UIBezierPath
        UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, frame.size.width, frame.size.height)];

        //CAShapeLayer
        CAShapeLayer *shapLayer = [CAShapeLayer layer];
        shapLayer.path = path.CGPath;
        shapLayer.fillColor = [UIColor clearColor].CGColor;//图形填充色
        UIColor *grayColor =  [UIColor colorWithRed:155/255.0 green:155/255.0 blue:155/255.0 alpha:1];
        shapLayer.strokeColor =  grayColor.CGColor;//边线颜色
        [self.layer addSublayer:shapLayer];

那么我们开始第一步：画出最底层的灰色圆

底层灰色圆形

        //UIBezierPath
        CGPoint arcCenter = CGPointMake(frame.size.width/2, frame.size.width/2);
        CGFloat radius = frame.size.width/2;
        //圆形路径
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:arcCenter
                                                            radius:radius
                                                        startAngle:0
                                                          endAngle:M_PI*2
                                                         clockwise:YES];

        //CAShapeLayer
        CAShapeLayer *shapLayer = [CAShapeLayer layer];
        shapLayer.path = path.CGPath;
        shapLayer.fillColor = [UIColor clearColor].CGColor;//图形填充色
        UIColor *grayColor =  [UIColor colorWithRed:155/255.0 green:155/255.0 blue:155/255.0 alpha:1];
        shapLayer.strokeColor =  grayColor.CGColor;//边线颜色
        [self.layer addSublayer:shapLayer];

第二步：添加颜色渐变层CAGradientLayer。

CAGradientLayer是CALayer的子类，用来做渐变色的，用法请参考：
http://www.cnblogs.com/YouXianMing/p/3793913.html?utm_source=tuicool&utm_medium=referral。这篇帖子中介绍的很详细，就不做介绍了。

   //渐变图层 渐变：RYUIColorWithRGB(140, 94, 0)   >>  RYUIColorWithRGB(229, 168, 46)   >>    RYUIColorWithRGB(140, 94, 0)
        CALayer * grain = [CALayer layer];
        [self.layer addSublayer:grain];
        //我们是两种渐变色，所以我么要用一个grain 对象将两个渐变图层放到一起。
        CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
        gradientLayer.frame = CGRectMake(-PROGRESS_LINE_WIDTH, -PROGRESS_LINE_WIDTH, frame.size.width/2+PROGRESS_LINE_WIDTH*2, frame.size.height+PROGRESS_LINE_WIDTH*2);
        [gradientLayer setColors:[NSArray arrayWithObjects:
                                  (id)[RYUIColorWithRGB(140, 94, 0) CGColor],
                                  (id)[RYUIColorWithRGB(229, 168, 46) CGColor], nil]];// 颜色分配
        [gradientLayer setLocations:@[@0.1,@0.9]];// 颜色分割线
        [gradientLayer setStartPoint:CGPointMake(0.05, 1)];// 起始点
        [gradientLayer setEndPoint:CGPointMake(0.9, 0)]; // 结束点
        [grain addSublayer:gradientLayer];
        
        
        CAGradientLayer * gradientLayer1 = [CAGradientLayer layer];
        gradientLayer1.frame = CGRectMake(self.bounds.size.width/2-PROGRESS_LINE_WIDTH, -PROGRESS_LINE_WIDTH, frame.size.width/2+PROGRESS_LINE_WIDTH*2, frame.size.height+PROGRESS_LINE_WIDTH*2);
        [gradientLayer1 setColors:[NSArray arrayWithObjects:
                                   (id)[RYUIColorWithRGB(229, 168, 46) CGColor],
                                   (id)[RYUIColorWithRGB(140, 94, 0) CGColor], nil]];// 颜色分配
        [gradientLayer1 setLocations:@[@0.3,@1]];// 颜色分割线
        [gradientLayer1 setStartPoint:CGPointMake(0.9, 0.05)];// 起始点
        [gradientLayer1 setEndPoint:CGPointMake(1, 1)];// 结束点
        [grain addSublayer:gradientLayer1];

第三步：设置遮罩层。

layer的遮罩层介绍：设置遮罩层:CALayer的mask属性，设置遮罩层后，layer.mask = maskLayer；maskLayer透明的地方layer不显示，maskLayer不透明的地方layer显示。例：下面是遮罩层介绍，代码和本文介绍的圆形进度条无关。

未设置遮罩层时：

     UIView *bgView = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
    [self.view addSubview:bgView];
    bgView.layer.borderColor = [UIColor blackColor].CGColor;
    bgView.layer.borderWidth = 1;
    //底层被遮罩的layer
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    [bgView.layer addSublayer:gradientLayer];
    gradientLayer.frame = CGRectMake(0, 0, 100, 100);
    gradientLayer.backgroundColor = [UIColor redColor].CGColor;

效果图显示如下：

Simulator Screen Shot 2017年9月4日 15.44.03.png

设置遮罩层后

//遮罩层
    CALayer *maskLayer = [CALayer layer];
    maskLayer.frame = CGRectMake(0, 10, 100, 10);
    gradientLayer.mask = maskLayer;

效果图：（由于未设置遮罩层颜色，故底层红色layer不显示）

Simulator Screen Shot 2017年9月4日 15.50.33.png

遮罩层设置颜色后：

遮罩层有颜色的地方显示下面的layer，透明的地方反而不显示

maskLayer.backgroundColor = [UIColor blackColor].CGColor;

Simulator Screen Shot 2017年9月4日 15.50.59.png

下面进入正题，设置底层渐变layer,即：grain的遮盖层。

//进度layer 即：遮盖layer
     _progressLayer = [CAShapeLayer layer];
     [self.layer addSublayer:_progressLayer];
     _progressLayer.path = _circlePath.CGPath;
     _progressLayer.strokeColor = [UIColor blueColor].CGColor;
     _progressLayer.fillColor = [[UIColor clearColor] CGColor];
     _progressLayer.lineWidth = PROGRESS_LINE_WIDTH;
     _progressLayer.strokeEnd = 0.f;

最后一步。设置遮罩layer：_progressLayer 的动画。

//设置_progressLayer的进度
-(void)setProgress:(float)progress
{
    [self startAninationWithPro:progress];
}
//根据进度progress做动画
-(void)startAninationWithPro:(CGFloat)pro
{
    //增加动画
    CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3;
    pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue=[NSNumber numberWithFloat:pro];
    pathAnimation.autoreverses=NO;
    
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.repeatCount = 1;
    [_progressLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
}

OVER。效果图如下：