iOS 圆环渐变色动画

先上图

Untitled1.gif

思路

1.自定义view，在- (void)drawRect:(CGRect)rect方法中用贝塞尔曲线画一个圆，设置中间的填充颜色为clear， 增加边框，设置边框的颜色。这样就有一个圆环了。
2.根据slider的值给圆环的终点动态赋值，就可以动起来了。
3.做渐变色。

---

主要代码

在.h文件中

@property (nonatomic , strong)UILabel *progressLabel;//*中间label*/

@property (nonatomic , assign)CGFloat progress;//*progress*/

在.m文件中

- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    self.progressLayer.opacity = 0;
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
    
    CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
    CGFloat radius = 90;
    CGFloat start  = - M_PI_2; //设置起点
    CGFloat end    = - M_PI_2 + M_PI * 2 * self.progress;//设置终点
    
    //画一个圆，填充色透明，设置边框带颜色，就是一个圆环
    self.progressLayer = [CAShapeLayer layer];
    self.progressLayer.frame = self.bounds;
    self.progressLayer.fillColor = [UIColor clearColor].CGColor; //填充颜色
    self.progressLayer.strokeColor = [UIColor greenColor].CGColor; //path填充的颜色，即圆环的颜色
    self.progressLayer.lineCap = kCALineCapRound;//线边缘是圆形
    self.progressLayer.lineWidth = 10;
    
    //用贝塞尔曲线画圆
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:start endAngle:end clockwise:YES];
    self.progressLayer.path = [bezierPath CGPath];
    [self.layer addSublayer:self.progressLayer];
    
    //添加渐变色
    
    CALayer *layer = [CALayer layer];
    
    CAGradientLayer *rightLayer = [CAGradientLayer layer];
    rightLayer.frame = CGRectMake(self.frame.size.width / 2, 0, self.frame.size.width / 2, self.frame.size.height);
    rightLayer.locations = @[@0.1,@0.8,@1];
    rightLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];
    [layer addSublayer:rightLayer];
    
    CAGradientLayer *leftLayer = [CAGradientLayer layer];
    leftLayer.frame = CGRectMake(0, 0, self.frame.size.width / 2, self.frame.size.height);
    leftLayer.locations = @[@0.1,@0.8,@1];
    leftLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor greenColor].CGColor];
    [layer addSublayer:leftLayer];
    
    [layer setMask:self.progressLayer];
    [self.layer addSublayer:layer];
    
}

#pragma mark ----------- 懒加载 -----------

- (UILabel *)progressLabel {
    if (_progressLabel == nil) {
        _progressLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
        _progressLabel.center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
        _progressLabel.textAlignment = NSTextAlignmentCenter;
        [self addSubview:_progressLabel];
    }
    return _progressLabel;
}

在viewController中

#import "ViewController.h"
#import "SSYCycleView.h"        //**自定义view*/

@interface ViewController ()

@property (nonatomic , strong)SSYCycleView *cycleView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    
    [self createUI];
    
}

- (void)createUI {
    [self.view addSubview:self.cycleView];
    
    UISlider *slider = [[UISlider alloc]initWithFrame:CGRectMake(self.cycleView.frame.origin.x - 20, self.cycleView.frame.origin.y + self.cycleView.frame.size.height + 50, self.cycleView.frame.size.width + 40, 20)];
    [self.view addSubview:slider];
    
    //添加方法
    [slider addTarget:self action:@selector(sliderChangeMethod:) forControlEvents:UIControlEventValueChanged];
}

- (void)sliderChangeMethod:(UISlider *)sender {
    self.cycleView.progressLabel.text = [NSString stringWithFormat:@"%.2f%%", sender.value*100];
    self.cycleView.progress = sender.value;
}

#pragma mark ----------- 懒加载 -----------

- (SSYCycleView *)cycleView {
    if (_cycleView == nil) {
        _cycleView = [[SSYCycleView alloc]initWithFrame:CGRectMake(90, 100, 200, 200)];
        _cycleView.backgroundColor = [UIColor whiteColor];
    }
    return _cycleView;
}

@end

链接点这里

Github链接