CAGradientLayer可以繪制顏色漸變的圖層，先來看一些它的屬性：
colors圖層上所有的顏色數(shù)組
locations顏色數(shù)組中各種顏色所占的比例
startPoint圖層顏色變化開始點(diǎn)，圖層左上角（0，0），右下角（1，1），中間點(diǎn)為（0.5，0.5）
endPoint圖層顏色變化結(jié)束點(diǎn)
type繪制類型，目前只有默認(rèn)的軸向類型kCAGradientLayerAxial
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.bounds = CGRectMake(0, 0, 200, 200);
gradientLayer.position = CGPointMake([UIScreen mainScreen].bounds.size.width/2, 550);
gradientLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor yellowColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
gradientLayer.locations = @[@0.25,@0.5,@0.75,@1];
gradientLayer.startPoint = CGPointMake(0.5, 0);
gradientLayer.endPoint = CGPointMake(0.5, 1);
[self.view.layer addSublayer:gradientLayer];
gradientLayer1.png
//添加一個(gè)動(dòng)畫顯示文字的的圖層
//1.添加文字
UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake([UIScreen mainScreen].bounds.size.width/2-100, 450, 200, 200)];
textLabel.textAlignment = NSTextAlignmentCenter;
textLabel.text = @"MacPen";
textLabel.backgroundColor = [UIColor clearColor];
textLabel.textColor = [UIColor blackColor];
textLabel.font = [UIFont systemFontOfSize:30];
[self.view addSubview:textLabel];
//2.添加一個(gè)顏色漸變的圖層
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.bounds = textLabel.bounds;
gradientLayer.position = textLabel.center;
gradientLayer.colors = @[(__bridge id)[UIColor blackColor].CGColor,
(__bridge id)[UIColor whiteColor].CGColor,
(__bridge id)[UIColor blackColor].CGColor];
gradientLayer.locations = @[@0.3,@0.5,@0.7];
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);
[self.view.layer addSublayer:gradientLayer];
//將文字層設(shè)置成漸變層的遮罩mask，mask的意思就是按透明度裁剪，透明部分裁剪，非透明部分保留，也就是文字部分被保留，漸變層去填充保留的文字部分的顏色
gradientLayer.mask = textLabel.layer;
//lable.layer被設(shè)置為gradientLayer的mask，也就是label從原來的父視圖上移除，將lable.layer的父圖層就被設(shè)置為gradientLayer，那么label的frame就要以gradientLayer作為參考坐標(biāo)系重新設(shè)置
textLabel.frame = gradientLayer.bounds;
//3.給漸變圖層的顏色加一個(gè)動(dòng)畫
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"locations"];
basicAnimation.fromValue = @[@0,@0,@0.25];
basicAnimation.toValue = @[@0.75,@1,@1];
basicAnimation.repeatCount = HUGE_VALF;
basicAnimation.duration = 1.5;
[gradientLayer addAnimation:basicAnimation forKey:nil];
這里先對(duì)gradientLayer.locations進(jìn)行一個(gè)說明，gradientLayer.locations = @[@0.3,@0.5,@0.7];在圖層上的表現(xiàn)占比如下圖
gradientLayer2.png
實(shí)現(xiàn)的文字效果如下
gradientLayer.gif
然后我們使用CAGradientLayer和CAShapeLayer制作一個(gè)顏色漸變的進(jìn)度條，先看一下效果
gradientProgressLayer.gif
這個(gè)效果主要分兩部分，一個(gè)是中間的文字以及文字內(nèi)容和顏色的動(dòng)畫，另一個(gè)就是進(jìn)度條及其動(dòng)畫。
先看第一部分文字設(shè)置及動(dòng)畫，這里使用CATextLayer完成：
//添加一個(gè)文字圖層
self.textLayer = [CATextLayer layer];
self.textLayer.bounds = CGRectMake(0, 0, 100, 60);
self.textLayer.position = CGPointMake(self.view.bounds.size.width/2, 550);
self.textLayer.foregroundColor = [UIColor redColor].CGColor;
self.textLayer.fontSize = 30;
self.textLayer.alignmentMode = kCAAlignmentCenter;
self.textLayer.string = @"0%";
[self.view.layer addSublayer:self.textLayer];
//文字顏色動(dòng)畫使用關(guān)鍵幀動(dòng)畫
CAKeyframeAnimation *textAnimation = [CAKeyframeAnimation animationWithKeyPath:@"foregroundColor"];
textAnimation.values = @[(id)[UIColor greenColor].CGColor,
(id)[UIColor yellowColor].CGColor,
(id)[UIColor redColor].CGColor];
textAnimation.repeatCount = 1;
textAnimation.duration = 1.7;
[self.textLayer addAnimation:textAnimation forKey:nil];
//使用CADisplayLink刷新文字圖層中的文字
[self startDisplayLink];
[self performSelector:@selector(stopDisplayLink) withObject:nil afterDelay:1.7];
- (void)startDisplayLink{
self.displayLink = [CADisplayLink displayLinkWithTarget:self
selector:@selector(handleDisplayLink:)];
self.displayLink.preferredFramesPerSecond = 60;
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop]
forMode:NSDefaultRunLoopMode];
}
- (void)handleDisplayLink:(CADisplayLink *)displayLink{
if (self.progress < 100) {
self.progress += 1;
self.textLayer.string = [NSString stringWithFormat:@"%d%%",self.progress];
}
}
- (void)stopDisplayLink{
[self.displayLink invalidate];
self.displayLink = nil;
}
第二部分就是進(jìn)度條的設(shè)置，方法就是在兩個(gè)漸變的拼接圖層上添加進(jìn)度條的遮罩層，那么顯示進(jìn)度條的地方就會(huì)顯示底層的漸變色。
//添加環(huán)形的進(jìn)度條的淺色背景
UIBezierPath *backCirclePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:90 startAngle:-M_PI*7/6 endAngle:M_PI/6 clockwise:YES];
CAShapeLayer *backCircleLayer = [CAShapeLayer layer];
backCircleLayer.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2-100, 450, 200, 200);
backCircleLayer.fillColor = [UIColor clearColor].CGColor;
backCircleLayer.strokeColor = [UIColor grayColor].CGColor;
backCircleLayer.lineWidth = 5;
backCircleLayer.path = backCirclePath.CGPath;
backCircleLayer.lineCap = kCALineCapRound;
backCircleLayer.opacity = 0.25;
[self.view.layer addSublayer:backCircleLayer];
backCircleLayer.strokeStart = 0;
backCircleLayer.strokeEnd = 1;
//添加環(huán)形的進(jìn)度條
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:90 startAngle:-M_PI*7/6 endAngle:M_PI/6 clockwise:YES];
self.circleLayer = [CAShapeLayer layer];
self.circleLayer.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2-100, 450, 200, 200);
self.circleLayer.fillColor = [UIColor clearColor].CGColor;
self.circleLayer.strokeColor = [UIColor grayColor].CGColor;
self.circleLayer.lineWidth = 5;
self.circleLayer.lineCap = kCALineCapRound;
self.circleLayer.path = circlePath.CGPath;
[self.view.layer addSublayer:self.circleLayer];
self.circleLayer.strokeStart = 0;
self.circleLayer.strokeEnd = 1;
//環(huán)形進(jìn)度條添加動(dòng)畫
CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
basicAnimation.fromValue = @[@0];
basicAnimation.toValue = @[@1];
basicAnimation.repeatCount = 1;
basicAnimation.duration = 1.7;
[self.circleLayer addAnimation:basicAnimation forKey:nil];
//添加顏色漸變的圖層
//承載圖層
CALayer *coverLayer = [CALayer layer];
coverLayer.frame = CGRectMake([UIScreen mainScreen].bounds.size.width/2-100, 450, 200, 200);
//左半邊漸變圖層
CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(0, 0, 100, 200);
gradientLayer1.colors = @[(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor yellowColor].CGColor];
gradientLayer1.locations = @[@0.3,@0.7];
gradientLayer1.startPoint = CGPointMake(0, 1);
gradientLayer1.endPoint = CGPointMake(1, 0);
[coverLayer addSublayer:gradientLayer1];
//右半邊漸變圖層
CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
gradientLayer2.frame = CGRectMake(100, 0, 100, 200);
gradientLayer2.colors = @[(__bridge id)[UIColor yellowColor].CGColor,
(__bridge id)[UIColor redColor].CGColor];
gradientLayer2.locations = @[@0.3,@0.7];
gradientLayer2.startPoint = CGPointMake(0, 0);
gradientLayer2.endPoint = CGPointMake(1, 1);
[coverLayer addSublayer:gradientLayer2];
//將環(huán)形圖層設(shè)置為漸變色圖層的mask
coverLayer.mask = self.circleLayer;
self.circleLayer.frame = coverLayer.bounds;
[self.view.layer addSublayer:coverLayer];
參考鏈接
http://blog.csdn.net/zhoutao198712/article/details/20864143
