iOS渐变色圆环进度条实现（带百分比数字）

最终效果大概是这样滴，动画要求是时长共两秒。
第一秒进度条滑动至进度的90%，第二秒滑动剩下的10%，中间数字跟随滑动显示当前已滑动的百分比。


圆环进度条.gif

基本思路：

1.绘制贝塞尔曲线，画圆；
2.创建底部灰色部分圆环；
3.创建进度条圆环；
4.添加渐变色图层；
5.设置定时器开始动画；

文中一些参数说明

#define percent 0.9 //第一段动画完成百分比
#define duration_First 1.0 //第一段动画时长
#define duration_Second 1.0 //第二段动画时长
#define TimeInterval 0.02 //定时器间隔时间

@property (assign, nonatomic) CGFloat progress;//进度值

一、绘制贝塞尔曲线，画圆

//贝塞尔曲线画圆弧   
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.width/2, self.height/2)radius:(self.width-kAdjustRatio(17))/2.0 startAngle:-M_PI/2 endAngle:3*M_PI/2 clockwise:YES];    
//设置颜色    
[[UIColor whiteColor] set];    
circlePath.lineWidth = 10;    
//开始绘图    
[circlePath stroke];

关于贝塞尔曲线参数说明：
1.Center：圆心坐标；
2.radius：圆半径，以上图为例，即为中间圆心到圆环中间部分的距离；
3.startAngle：画圆的开始角度；
4.endAngle：画圆的结束角度；
5.clockwise：是否为顺时针，YES是，NO否；

由于iOS默认的角度分布如下图所示，起始0是在右边，所以想要从顶部顺时针开始画圆，起始终止角度应该是-M_PI/2和3M_PI/2

iOS默认角度分布图.png

二、创建底部灰色部分圆环

圆环部分用的是CAShapeLayer

CAShapeLayer属于QuartzCore框架，继承自CALayer。CAShapeLayer是在坐标系内绘制贝塞尔曲线的，通过绘制贝塞尔曲线，设置shape(形状)的path(路径)，从而绘制各种各样的图形以及不规则图形。因此，使用CAShapeLayer需要与UIBezierPath一起使用。
UIBezierPath类允许你在自定义的 View 中绘制和渲染由直线和曲线组成的路径。你可以在初始化的时候直接为你的UIBezierPath指定一个几何图形。
通俗点就是UIBezierPath用来指定绘制图形路径，而CAShapeLayer就是根据路径来绘图的。

CAShapeLayer *bgLayer = [CAShapeLayer layer];
bgLayer.frame = self.bounds;
//填充色 透明
bgLayer.fillColor = [UIColor clearColor].CGColor;
bgLayer.lineWidth = 10;
//线条颜色
bgLayer.strokeColor = kUIColorFromRGB(0xF6F6F9).CGColor;
//起始点
bgLayer.strokeStart = 0;
//终点
bgLayer.strokeEnd = 1;
//让线两端是圆滑的状态
bgLayer.lineCap = kCALineCapRound;
//把背景的路径设为贝塞尔曲线路径
bgLayer.path = circlePath.CGPath;
[self.bgView.layer addSublayer:bgLayer];

三、创建进度条圆环

进度条圆环依然使用CAShapeLayer,strokeEnd暂设为0，在后面添加动画时动态调整数值。

_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.bounds;
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.lineWidth = 17;
_progressLayer.lineCap = kCALineCapRound;
_progressLayer.strokeColor = kUIColorFromRGB(0xC8A159).CGColor;
_progressLayer.strokeStart = 0;
_progressLayer.strokeEnd = 0;
_progressLayer.path = circlePath.CGPath;
[self.layer addSublayer:_progressLayer];

四、添加渐变色图层

渐变图层使用CAGradientLayer,是用于处理渐变色的图层，一样继承自CALayer。

_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = self.bounds;
[self.bgView.layer addSublayer:_gradientLayer];

由于CAGradientLayer是线性渐变的，所以在这里，我在此图层上加了两个子图层用以做圆环的渐变处理，

//左渐变图层
CAGradientLayer *leftGradientLayer = [CAGradientLayer layer];
leftGradientLayer.frame = CGRectMake(0, 0, self.width/2, self.height);
[leftGradientLayer setColors:[NSArray arrayWithObjects:(id)kUIColorFromRGB(0xEBD6AB).CGColor, (id)kUIColorFromRGB(0xC6A05D).CGColor, nil]];
[leftGradientLayer setLocations:@[@0.0,@0.9]];
[leftGradientLayer setStartPoint:CGPointMake(0, 0)];
[leftGradientLayer setEndPoint:CGPointMake(0, 1)];
[_gradientLayer addSublayer:leftGradientLayer];
  
//右渐变图层  
CAGradientLayer *rightGradientLayer = [CAGradientLayer layer];
rightGradientLayer.frame = CGRectMake(self.width/2, 0, self.width/2, self.height);
[rightGradientLayer setColors:[NSArray arrayWithObjects:(id)kUIColorFromRGB(0xEBD6AB).CGColor, (id)kUIColorFromRGB(0xC6A05D).CGColor, nil]];
[rightGradientLayer setLocations:@[@0.1,@1.0]];
[rightGradientLayer setStartPoint:CGPointMake(0, 0)];
[rightGradientLayer setEndPoint:CGPointMake(0, 1)];
[_gradientLayer addSublayer:rightGradientLayer];
[_gradientLayer setMask:_progressLayer];

参数说明

  • colors：起始颜色数组，至少两个,可以多个；
  • locations：定义每种颜色的位置，一个NSNumber数组，数量对应colors，取值范围[0,1]，值必须为单调递增的，例如[@0.2,@0.5,@1]；

  • startPoint,endPoint：颜色起始和结束点，也就是颜色渐变的方向，如下图所示；


    颜色坐标分布.png

    Point的x，y值分别代表X,Y方向，x值越大代表越靠右，y值越大越往下，例如
    （0,0）->（0,1）代表竖直(Y)方向从上往下渐变，
    （0,0）->（1,0）代表水平(X)水平方向从左至右渐变，
    （1,0）->（0,1）代表从右上角到左下角的渐变；

为了渐变效果更好，也可以把渐变区域分为四块，也就是四个CAGradientLayer，颜色首尾相接，拼成一个完整的渐变圆形，本文只做了左右两部分，都是从上至下的颜色渐变，这里不再举例细说。

五、设置定时器开始动画

由于要数字跟随动画效果实时改变数字，所以选择了定时器，一般的没有此要求的动画可以直接用CABasicAnimation动画做就可以了。

因为有两段动画，所以这里是先执行一段动画，再延时第一段动画时间后，执行第二段动画。

//第一段动画
[self point];
//开启计时器
[self startAnimate];
WS(weakSelf);
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(duration_First * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
     //第二段动画
     [weakSelf secondPoint];
});

进度条的动画时采用CABasicAnimation动画，而效果图上那个小白点的动画效果时在滑动中始终在进度条的头部位置跟随滑动，即为一个视图沿曲线圆运动这么一个效果，在本文中就是沿着和进度条共同的贝塞尔曲线圆运动，采用的是CAKeyframeAnimation动画。

- (void)point{

    CABasicAnimation *animation_1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation_1.fromValue = @0;
    animation_1.toValue = [NSNumber numberWithDouble:self.progress*percent];
    animation_1.duration = duration_First;
    animation_1.fillMode = kCAFillModeForwards;
    animation_1.removedOnCompletion = NO;
    [self.progressLayer addAnimation:animation_1 forKey:nil];
    
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    pathAnimation.calculationMode = kCAAnimationPaced;
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.duration = duration_First;
    pathAnimation.repeatCount = 0;
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.width/2, self.height/2) radius:(self.width-kAdjustRatio(17))/2.0 startAngle:-M_PI/2 endAngle:-M_PI/2+2*M_PI*self.progress*percent clockwise:YES];
    pathAnimation.path = circlePath.CGPath;
    [self.pointView.layer addAnimation:pathAnimation forKey:@"movePoint"];
}

参数说明
keyPath：动画执行的属性值，可以执行layer的一些属性，改变值形成动画，这里使用的是CAShapeLayer的strokeEnd属性；
fromValue：动画起始值；
toValue：动画结束值，本文中第一段结束值为进度的90%，所以为self.progress*percent；
duration：动画时长；
fillMode：视图在非Active时的行为，kCAFillModeForwards为始终保持为最新状态；
removedOnCompletion：动画完成后是否删除动画效果；

启动定时器

- (void)startAnimate{
    [self deleteTimer];
    self.timer = [NSTimer scheduledTimerWithTimeInterval:TimeInterval target:self selector:@selector(animate:) userInfo:nil repeats:YES];
}

//删除定时器
- (void)deleteTimer{
    [self.timer invalidate];
    self.timer = nil;
}

定时器逐渐增加self.progressLab要显示的值self.showProgress，要在1秒钟之内将值从0增加至进度的90%，假设进度为0.8，则self.showProgress要从1秒内从0渐增至0.8*0.9，定时器每TimeInterval（0.02秒）执行一次，则每一次执行要增加的值为...emmmmm...(0.8x0.9)÷(1÷0.02)，嗯，就是这个，后面一段增加同理。

- (void)animate:(NSTimer *)time{
    if (self.showProgress <= self.progress*percent) {
        self.showProgress += TimeInterval*self.progress*percent/duration_First;
    }else if (self.showProgress <= self.progress){
        self.showProgress += TimeInterval*self.progress*(1-percent)/duration_Second;
    }else{
        [self deleteTimer];
    }
    
    if (self.showProgress > 1) {
        self.showProgress = 1;
    }
    
    NSString *progressStr = [NSString stringWithFormat:@"%.0f%%",self.showProgress*100];
    self.progressLab.text = progressStr;
}

第二段动画，跟第一段动画同样的方法

特别注意两段动画的取值范围，第一、二段CAKeyframeAnimation动画的贝塞尔曲线的startAngle和endAngle，都根据要滑动的范围做了处理，不再是整圆了，而是每段进度要滑动的圆弧的角度。

- (void)secondPoint{
    CABasicAnimation *animation_1 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation_1.fromValue = [NSNumber numberWithDouble:self.progress*percent];
    animation_1.toValue = [NSNumber numberWithDouble:self.progress];
    animation_1.duration = duration_Second;
    animation_1.fillMode = kCAFillModeForwards;
    animation_1.removedOnCompletion = NO;
    [self.progressLayer addAnimation:animation_1 forKey:nil];
    
    CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    pathAnimation.calculationMode = kCAAnimationPaced;
    pathAnimation.fillMode = kCAFillModeForwards;
    pathAnimation.removedOnCompletion = NO;
    pathAnimation.duration = duration_Second;
    pathAnimation.repeatCount = 0;
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.width/2, self.height/2) radius:(self.width-kAdjustRatio(17))/2.0 startAngle:-M_PI/2+2*M_PI*self.progress*percent endAngle:-M_PI/2+2*M_PI*self.progress clockwise:YES];
    pathAnimation.path = circlePath.CGPath;
    [self.pointView.layer addAnimation:pathAnimation forKey:@"movePoint"];
}

一个比较简单的渐变圆环进度条就做好了，外部传入进度progress，即可开始执行动画。也可以自己做一些其他处理，比如加一个按钮，点击后动画再来一遍，again and again...，或者多个圆环的进度条等等。
https://github.com/TonyHYH/HYHCircleView.git

补充：关于画顺时针的圆和逆时针的圆
如果要画顺时针的圆，贝塞尔曲线的起止角度是从-M_PI/2到3M_PI/2，如果要逆时针，那么这个起止角度就要反过来，从3M_PI/2到-M_PI/2。另外，那个小白点运动的贝塞尔曲线的起止角度也要一起改变，就是第一二段动画那里的pointView的动画。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,968评论 6赞 482
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,601评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 153,220评论 0赞 344
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,416评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,425评论 5赞 374
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,144评论 1赞 285
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,432评论 3赞 401
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,088评论 0赞 261
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,586评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,028评论 2赞 325
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,137评论 1赞 334
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,783评论 4赞 324
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,343评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,333评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,559评论 1赞 262
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,595评论 2赞 355
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,901评论 2赞 345