2019獨角獸企業重金招聘Python工程師標準>>>

代碼主要用到: CALayer+UIBezierPath+CAShapeLayer+CAGradientLayer+CABasicAnimation
1.創建一個圖層

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上

//創建圓環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];

效果如圖:

3.利用CAGradientLayer繪制漸變的顏色 由于CAGradientLayer是坐標到坐標之間的漸變,需要什么效果需要自己定制
漸變成坐標如下:

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];

效果如圖:

最后疊加的效果如圖:

轉載于:https://my.oschina.net/u/3729363/blog/1607540

總結

以上是生活随笔為你收集整理的iOS 做一个圆形渐变圆环的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。