积满一定条件获取某种勋章或奖励 需要一个弧形的曲线来填充色展示完成进度 有需要这种效果的可以看看

效果图

曲线进度条渐进色动画.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;

}

demo 地址

LHAnimationDemo