android 圆形进度条渐变色 ios 圆形进度条

转载

笑傲江湖求败 2023-07-05 17:27:16

文章标签 android 圆形进度条渐变色 ios弧形进度条贝塞尔曲线进度条 ci 文章分类 Android 移动开发

最终效果大概是这样滴，动画要求是时长共两秒。

第一秒进度条滑动至进度的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...，或者多个圆环的进度条等等。

补充：关于画顺时针的圆和逆时针的圆

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

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。