积满一定条件获取某种勋章或奖励 需要一个弧形的曲线来填充色展示完成进度 有需要这种效果的可以看看
效果图
曲线进度条渐进色动画.gif
方法
创建了两个CAShapeLayer topLayer和bottomLayer bottomLayer来绘制下面灰色弧形的完整部分（表示容量） topLayer用来显示上层的渐变色弧形进度条（表示完成度）
/** 设置top弧形曲线渐变层 */
- (void)gradient {
self.topLayer = [CAShapeLayer layer];
self.topLayer.lineWidth = layerWidth;
self.topLayer.lineCap = kCALineCapRound;
self.topLayer.fillColor = [UIColor clearColor].CGColor;
self.topLayer.strokeColor = [UIColor whiteColor].CGColor;
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = CGRectMake(0,0,self.frame.size.width,self .frame.size.height);
gradient.colors = @[(id)[UIColor colorWithRed:1
green:178 / 255.0
blue:101 / 255.0
alpha:1].CGColor,
(id)[UIColor colorWithRed:1
green:69 / 255.0
blue:69 / 255.0
alpha:1].CGColor];
// [gradient setLocations:@[@0, @0.5, @1]];
gradient.startPoint = CGPointMake(0, 0);
gradient.endPoint = CGPointMake(1.0, 0);
self.topLayer.path = [self arcProgressPath];
[gradient setMask:self.topLayer];
[self.layer addSublayer:gradient];
[self setCurrentProgress:_progress];
}
//底部灰色曲线
- (CAShapeLayer *)bottomLayer {
if (!_bottomLayer) {
_bottomLayer = [CAShapeLayer layer];
_bottomLayer.lineCap = kCALineCapRound;
_bottomLayer.lineWidth = layerWidth;
_bottomLayer.fillColor = [UIColor clearColor].CGColor;
UIColor *color = [UIColor colorWithRed:225.0 / 255.0
green:226.0 / 255.0
blue:230.0/255.0
alpha:1];
_bottomLayer.strokeColor = (self.bottomColor?self.bottomColor:color).CGColor;
_bottomLayer.path = [self arcProgressPath];
[self.layer addSublayer:_bottomLayer];
}
return _bottomLayer;
}
设置弧形路径
//弧形路径
- (CGPathRef)arcProgressPath{
CGPoint origin = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2 );
CGFloat radius = self.frame.size.width / 2 - layerWidth ;
UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:origin
radius:radius
startAngle:- M_PI_4 * 5
endAngle:M_PI_4
clockwise:YES];
return progressPath.CGPath;
}
设置渐进动画
- (void)setCurrentProgress:(CGFloat)progress {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.duration = 2;
self.topLayer.strokeEnd = progress;
[self.topLayer addAnimation:animation forKey:@"animationStrokeEnd"];
[CATransaction commit];
_progress = progress;
}
