iOS 作一个圆形渐变圆环

时间 2019-11-12

标签 ios 一个圆形渐变圆环栏目 iOS 繁體版

原文原文链接

代码主要用到: CALayer+UIBezierPath+CAShapeLayer+CAGradientLayer+CABasicAnimation
1.建立一个图层code

CGFloat layerWH = 100;
    _contentLayer = [CALayer layer];
    [self.view.layer addSublayer:_contentLayer];
    _contentLayer.frame = CGRectMake(100, 100, layerWH, layerWH);
    _contentLayer.backgroundColor = [UIColor blueColor].CGColor;

效果如图: 图片

2.绘制一个路径,再生成一个背景圆环加到view上it

//建立圆环
    CGFloat lineWidth = 5;
    CGFloat radius = layerWH * 0.5 - lineWidth * 0.5;
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(layerWH * 0.5, layerWH * 0.5) radius:radius startAngle:0 endAngle:M_PI * 2 clockwise:YES];
    //圆环遮罩
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.fillColor = [UIColor clearColor].CGColor;
    shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
    shapeLayer.lineWidth = lineWidth;
    shapeLayer.strokeStart = 0;
    shapeLayer.strokeEnd = 1;
    shapeLayer.lineCap = kCALineCapRound;
    shapeLayer.lineDashPhase = 0.8;
    shapeLayer.path = bezierPath.CGPath;
    [_contentLayer setMask:shapeLayer];

效果如图: io

3.利用CAGradientLayer绘制渐变的颜色因为CAGradientLayer是坐标到坐标之间的渐变,须要什么效果须要本身定制
渐变成坐标以下:table

NSMutableArray *colors = [NSMutableArray arrayWithObjects:(id)[UIColor yellowColor].CGColor,(id)[UIColor orangeColor].CGColor, nil];
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.shadowPath = bezierPath.CGPath;
    gradientLayer.frame = CGRectMake(0, 0, layerWH * 0.5, layerWH);
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1);
    [gradientLayer setColors:[NSArray arrayWithArray:colors]];
    
    NSMutableArray *colors1 = [NSMutableArray arrayWithObjects:(id)[UIColor redColor].CGColor,(id)[[UIColor orangeColor] CGColor], nil];
    CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.shadowPath = bezierPath.CGPath;
    gradientLayer1.frame = CGRectMake(layerWH * 0.5, 0, layerWH * 0.5, layerWH);
    gradientLayer1.startPoint = CGPointMake(0, 0);
    gradientLayer1.endPoint = CGPointMake(0, 1);
    [gradientLayer1 setColors:[NSArray arrayWithArray:colors1]];
    [_contentLayer addSublayer:gradientLayer]; //设置颜色渐变
    [_contentLayer addSublayer:gradientLayer1];

效果如图: im

最后叠加的效果如图:img