級(jí)別： ★★☆☆☆
標(biāo)簽：「iOS顏色漸變」「CAGradientLayer漸變」「CAGradientLayer」
作者： Xs·H
審校： QiShare團(tuán)隊(duì)
在iOS 繪制漸變·基礎(chǔ)篇的基礎(chǔ)上，CAGradientLayer配合CAShapeLayer可以實(shí)現(xiàn)很多漸變效果。本文列舉三個(gè)，并附上實(shí)現(xiàn)思路。
1、漸變色進(jìn)度條
- 漸變色進(jìn)度條實(shí)現(xiàn)效果
漸變色進(jìn)度條
- 漸變色進(jìn)度條實(shí)現(xiàn)代碼
// 進(jìn)度條view
UIView *progressView = [[UIView alloc] initWithFrame:CGRectMake(30.0, 100.0, self.view.bounds.size.width - 30.0 * 2, 5.0)];
progressView.center = (CGPoint){self.view.bounds.size.width / 2, self.view.bounds.size.height / 3};
progressView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
progressView.backgroundColor = [[UIColor lightGrayColor] colorWithAlphaComponent:.3];
progressView.layer.cornerRadius = progressView.bounds.size.height / 2;
progressView.layer.masksToBounds = YES;
[self.view addSubview:progressView];
// 漸變色layer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = progressView.bounds;
gradientLayer.colors = @[(__bridge id)[[UIColor greenColor] colorWithAlphaComponent:1.0].CGColor,
(__bridge id)[[UIColor blueColor] colorWithAlphaComponent:1.].CGColor,
(__bridge id)[[UIColor purpleColor] colorWithAlphaComponent:1.0].CGColor,];
gradientLayer.startPoint = (CGPoint){.0};
gradientLayer.endPoint = (CGPoint){1.0};
[progressView.layer addSublayer:gradientLayer];
// mask layer
CALayer *maskLayer = [CALayer layer];
maskLayer.frame = (CGRect){.0, .0, .0, gradientLayer.bounds.size.height};
maskLayer.backgroundColor = [UIColor whiteColor].CGColor;
gradientLayer.mask = maskLayer;
// 設(shè)置變化規(guī)則
CGFloat deltaWidth = gradientLayer.bounds.size.width / 60;
[NSTimer scheduledTimerWithTimeInterval:.1 repeats:YES block:^(NSTimer * _Nonnull timer) {
CGRect rect = maskLayer.bounds;
rect.size.width += deltaWidth;
maskLayer.frame = rect;
if (gradientLayer.bounds.size.width - maskLayer.bounds.size.width < deltaWidth) {
[timer invalidate];
}
}];
- 漸變色進(jìn)度條實(shí)現(xiàn)思路
1）創(chuàng)建progressView，設(shè)置淺灰色，切圓角，作為progress為0時(shí)的狀態(tài)；
2）創(chuàng)建gradientLayer，設(shè)置漸變色，左右均勻漸變，覆蓋到progressView.layer上面，作為progress為1時(shí)的狀態(tài)；
3）創(chuàng)建maskLayer，設(shè)置非透明色，賦值給gradientLyaer.mask，作為progress變化時(shí)的狀態(tài)。
4）定時(shí)改變maskLayer的width，通過(guò)maskLayer的width和gradientLayer重合部分來(lái)控制progress。
PS：
layer.mask與layer的非透明色重合部分才會(huì)被顯示出來(lái)。
用同樣的思路，也可以做出反向的進(jìn)度條，效果如下：
漸變色進(jìn)度條-反向
2、漸變色圓框
- 漸變色圓框?qū)崿F(xiàn)效果
漸變色圓框
- 漸變色圓框?qū)崿F(xiàn)代碼
// 圓框所在區(qū)域View
UIView *arcView = [[UIView alloc] initWithFrame:CGRectMake(.0, .0, 300.0, 300.0)];
arcView.center = (CGPoint){self.view.bounds.size.width / 2, self.view.bounds.size.height / 3};
arcView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self.view addSubview:arcView];
// 漸變色 layer
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = arcView.bounds;
gradientLayer.colors = @[(__bridge id)[[UIColor redColor] colorWithAlphaComponent:1.0].CGColor,
(__bridge id)[[UIColor greenColor] colorWithAlphaComponent:1.0].CGColor,
(__bridge id)[[UIColor blueColor] colorWithAlphaComponent:1.0].CGColor];
gradientLayer.startPoint = CGPointMake(.0, .0);
gradientLayer.endPoint = CGPointMake(.0, 1.0);
[arcView.layer addSublayer:gradientLayer];
// 圖形繪制 layer
CGFloat lineWidth = 10.0;
CGFloat rectSide = arcView.bounds.size.width - lineWidth;
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:(CGRect){lineWidth / 2, lineWidth / 2, rectSide, rectSide}];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
shapeLayer.lineWidth = lineWidth;
gradientLayer.mask = shapeLayer;
- 漸變色圓框?qū)崿F(xiàn)思路
1）創(chuàng)建arcView，確定漸變色圓框所在的區(qū)域；
2）創(chuàng)建gradientLayer，設(shè)置漸變色，上下均勻漸變，覆蓋到arcView.layer上面；
3）創(chuàng)建shapeLayer，設(shè)置fillColor為透明色，設(shè)置strokeColor為非透明色，設(shè)置合適的lineWidth；
4）創(chuàng)建bezierPath(path)，根據(jù)lineWidth設(shè)置繪制區(qū)域，賦值給shapeLayer.path；
5）將shapeLayer賦值給gradientLayer.mask，控制顯示出的圓框區(qū)域；
PS：圓框繪制可以理解成用圓規(guī)畫圓，
lineWidth表示圓規(guī)筆尖的寬度，rectSide表示筆尖中心放置的位置，strokerColor表示筆尖的顏色，fillColor表示閉合圓框內(nèi)部的填充色。
3、漸變色弧段
- 漸變色弧段實(shí)現(xiàn)效果
漸變色弧段
- 漸變色弧段實(shí)現(xiàn)代碼
// 弧段所在區(qū)域view
UIView *arcView = [[UIView alloc] initWithFrame:CGRectMake(.0, .0, 300.0, 300.0)];
arcView.center = (CGPoint){self.view.bounds.size.width / 2, self.view.bounds.size.height / 3};
arcView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin;
[self.view addSubview:arcView];
// 左側(cè)漸變色 layer
CAGradientLayer *gradientLayerLeft = [CAGradientLayer layer];
gradientLayerLeft.frame = CGRectMake(.0, .0, arcView.bounds.size.width / 2, arcView.bounds.size.height);
gradientLayerLeft.colors = @[(__bridge id)[[UIColor yellowColor] colorWithAlphaComponent:1.0].CGColor,
(__bridge id)[[UIColor greenColor] colorWithAlphaComponent:1.0].CGColor];
gradientLayerLeft.locations = @[@(.0), @(.67)];
gradientLayerLeft.startPoint = CGPointMake(.0, .0);
gradientLayerLeft.endPoint = CGPointMake(.0, 1.0);
[arcView.layer addSublayer:gradientLayerLeft];
// 右側(cè)漸變色 layer
CAGradientLayer *gradientLayerRight = [CAGradientLayer layer];
gradientLayerRight.frame = CGRectMake(arcView.bounds.size.width / 2.0, .0, arcView.bounds.size.width / 2, arcView.bounds.size.height);
gradientLayerRight.colors = @[(__bridge id)[[UIColor yellowColor] colorWithAlphaComponent:1.0].CGColor,
(__bridge id)[[UIColor redColor] colorWithAlphaComponent:1.0].CGColor];
gradientLayerRight.locations = @[@(.0), @(.67)];
gradientLayerRight.startPoint = CGPointMake(.0, .0);
gradientLayerRight.endPoint = CGPointMake(.0, 1.0);
[arcView.layer addSublayer:gradientLayerRight];
// 弧段繪制 layer
CGFloat lineWidth = 10.0;
CGFloat rectSide = arcView.bounds.size.width - lineWidth;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(arcView.bounds.size.width / 2, arcView.bounds.size.height / 2) radius:rectSide / 2 startAngle:-7.0 / 6 * M_PI endAngle:-11.0 / 6 * M_PI clockwise:YES];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.strokeColor = [UIColor whiteColor].CGColor;
shapeLayer.lineWidth = lineWidth;
shapeLayer.lineCap = @"round";
arcView.layer.mask = shapeLayer;
- 漸變色弧段實(shí)現(xiàn)思路
1）創(chuàng)建arcView，確定漸變色弧段所在的區(qū)域；
2）創(chuàng)建左側(cè)的gradientLayer，設(shè)置漸變色，上下均勻漸變，覆蓋到arcView.layer上面；
3）創(chuàng)建右側(cè)的gradientLayer，設(shè)置漸變色，上下均勻漸變，覆蓋到arcView.layer上面；
4）創(chuàng)建shapeLayer，設(shè)置fillColor為透明色，設(shè)置strokeColor為非透明色，設(shè)置合適的lineWidth；
4）創(chuàng)建bezierPath(path)，根據(jù)lineWidth設(shè)置繪制區(qū)域，賦值給shapeLayer.path；
5）將shapeLayer賦值給arcView.mask，控制顯示出的弧段區(qū)域；
PS：貝塞爾曲線的的角度規(guī)則為：從圓心開始，水平向右的弧度為
0，順時(shí)針弧度變大，逆時(shí)針弧度變小，水平向左為π。
以上漸變色繪制實(shí)例的源碼可從工程QiGradientLayer中獲取。
了解更多iOS及相關(guān)新技術(shù)，請(qǐng)關(guān)注我們的公眾號(hào)：
關(guān)注我們的途徑有：
QiShare(簡(jiǎn)書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號(hào))
推薦文章：
奇舞周刊279期
