很多時(shí)候設(shè)計(jì)師希望背景顏色加上顏色漸變效果,這樣會(huì)使整個(gè)界面看起來(lái)色彩更加豐富,生動(dòng)。今天主要講解下如何用CAGradientLayer實(shí)現(xiàn)背景顏色漸變效果,和使用CAGradientLayer實(shí)現(xiàn)某些漸變的特效。
先看效果動(dòng)畫
漸變背景顏色
特效1
特效2
漸變背景顏色
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.frame = (CGRect){CGPointZero,CGSizeMake(200, 200)};
colorLayer.position = self.view.center;
[self.view.layer addSublayer:colorLayer];
//顏色分配
colorLayer.colors = @[(__bridge id)[UIColor colorWithRed:0.0/255 green:222.0/255 blue:255.0/255 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:75.0/255 green:255.0/255 blue:249.0/255 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:190.0/255 green:253.0/255 blue:255.0/255 alpha:1.0].CGColor];
colorLayer.startPoint = CGPointMake(0.0, 0.0);//起始點(diǎn)
colorLayer.endPoint = CGPointMake(1.0, 1.0);//結(jié)束點(diǎn)
colorLayer.locations = @[@(0.25),@(0.5),@(0.75)];//顏色漸變位置分割線
這里得注意
startPoint,endPoint,locations遵循Layler的坐標(biāo)系，范圍為(0,1)。locations里面的值是遞增的，其位置點(diǎn)可以看做是y值為0在x軸上的點(diǎn)。至于每個(gè)顏色所占區(qū)域和漸變分割線是由locations上的點(diǎn)到（startPoint與endPoint這條直線）所確定確定。例如我上面代碼所表示的區(qū)域畫線后如下圖所示：
藍(lán)線為起始位置和結(jié)束位置，黃線為分割線
特效1
-(void)addGradientLayer
{
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.frame = (CGRect){CGPointZero,CGSizeMake(200, 200)};
colorLayer.position = self.view.center;
[self.view.layer addSublayer:colorLayer];
//顏色分配
colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor blueColor].CGColor];
colorLayer.locations = @[@(0.25),@(0.5),@(0.75)];
colorLayer.startPoint = CGPointMake(0, 0);
colorLayer.endPoint = CGPointMake(1, 0);
_timer = [NSTimer scheduledTimerWithTimeInterval:0.5 repeats:YES block:^(NSTimer *timer){
static CGFloat length = -0.1f;
if (length >= 1.1) {
length = - 0.1f;
[CATransaction setDisableActions:YES];
colorLayer.locations = @[@(length),@(length + 0.1),@(length + 0.15)];
}else{
[CATransaction setDisableActions:NO];
colorLayer.locations = colorLayer.locations = @[@(length),@(length + 0.1),@(length + 0.15)];
}
length += 0.1f;
}];
[_timer fire];
}
這里只是做了個(gè)定時(shí)器對(duì)
locations進(jìn)行定增操作。
特效2
-(void)addCircleGradientLayer
{
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.backgroundColor = [UIColor orangeColor].CGColor;
colorLayer.frame = CGRectMake(0, 120, 200, 200);
colorLayer.position = CGPointMake(self.view.center.x, colorLayer.frame.origin.y);
[self.view.layer addSublayer:colorLayer];
// 顏色分配
colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor whiteColor].CGColor,
(__bridge id)[UIColor redColor].CGColor];
colorLayer.locations = @[@(-0.2), @(-0.1), @(0)];
// 起始點(diǎn)
colorLayer.startPoint = CGPointMake(0, 0);
// 結(jié)束點(diǎn)
colorLayer.endPoint = CGPointMake(1, 0);
CAShapeLayer *circle = [self createCircleWithCenter:CGPointMake(100, 110) radius:90 startAngle:DEGREES(0) endAngle:DEGREES(360) clockwise:YES lineDashPattern:nil];
circle.strokeColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:circle];
circle.strokeEnd = 1.0f;
colorLayer.mask = circle;
_timer1 = [NSTimer scheduledTimerWithTimeInterval:1.0 repeats:YES block:^(NSTimer *timer){
static NSInteger index = 1;
if (index ++ % 2 == 0) {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
animation.fromValue = @[@(-0.1), @(-0.15), @(0)];
animation.toValue = @[@(1.0), @(1.1), @(1.15)];
animation.duration = 1.0;
[colorLayer addAnimation:animation forKey:nil];
}
}];
[_timer1 fire];
}
-(CAShapeLayer *)createCircleWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise lineDashPattern:(NSArray *)lineDashPattern
{
CAShapeLayer *layer = [CAShapeLayer layer];
layer.lineCap = kCALineCapRound;
// 貝塞爾曲線(創(chuàng)建一個(gè)圓)
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0)
radius:radius
startAngle:startAngle
endAngle:endAngle
clockwise:clockwise];
// 獲取path
layer.path = path.CGPath;
layer.position = center;
// 設(shè)置填充顏色為透明
layer.fillColor = [UIColor clearColor].CGColor;
// 獲取曲線分段的方式
if (lineDashPattern)
{
layer.lineDashPattern = lineDashPattern;
}
return layer;
}
-(void)addRectangleGradientLayer
{
CAGradientLayer *colorLayer = [CAGradientLayer layer];
colorLayer.backgroundColor = [UIColor orangeColor].CGColor;
colorLayer.frame = CGRectMake(0, 300, 300, 100);
colorLayer.position = CGPointMake(self.view.center.x, colorLayer.frame.origin.y);
[self.view.layer addSublayer:colorLayer];
// 顏色分配
colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor whiteColor].CGColor,
(__bridge id)[UIColor redColor].CGColor];
colorLayer.locations = @[@(-0.2), @(-0.1), @(0)];
// 起始點(diǎn)
colorLayer.startPoint = CGPointMake(0, 0);
// 結(jié)束點(diǎn)
colorLayer.endPoint = CGPointMake(1, 0);
_timer2 = [NSTimer scheduledTimerWithTimeInterval:1.0 repeats:YES block:^(NSTimer *timer){
static NSInteger index = 1;
if (index ++ % 2 == 0) {
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
animation.fromValue = @[@(-0.1), @(-0.15), @(0)];
animation.toValue = @[@(1.0), @(1.1), @(1.15)];
animation.duration = 1.0;
[colorLayer addAnimation:animation forKey:nil];
}
}];
[_timer2 fire];
}
這里其實(shí)是兩個(gè)特效，只是很類似所以放在了一起。第一個(gè)是加了一個(gè)圓形的遮罩然后對(duì)
locations進(jìn)行動(dòng)畫操作。第二個(gè)只是簡(jiǎn)單的對(duì)locations進(jìn)行動(dòng)畫操作。
擴(kuò)展
其實(shí)CAGradientLayer 的這四個(gè)屬性colors, locations,startPoint,endPoint` 我們都是可以進(jìn)行動(dòng)畫操作.
