概念
- 1蚜锨,CAGradientLayer用于處理漸變色的層結(jié)構(gòu)
- 2,CAGradientLayer的漸變色可以做隱式動(dòng)畫
- 3焚志,大部分情況下嘱腥,CAGradientLayer時(shí)和CAShapeLayer配合使用的。關(guān)于CAShapeLayer可以看我的這篇博客
基于CAShapeLayer和貝塞爾曲線的圓形進(jìn)度條動(dòng)畫【原創(chuàng)】 - 4朽色,CAGradientLayer可以用作PNG的遮罩效果
關(guān)于CAGradientLayer的坐標(biāo)系統(tǒng)
- 為什么要提到CAGradientLayer的坐標(biāo)系統(tǒng)呢邻吞?因?yàn)闈u變色的作用范圍,變化梯度的方向葫男,顏色變換的作用點(diǎn)都和CAGradientLayer的坐標(biāo)系統(tǒng)有關(guān)
CAGradientLayer坐標(biāo)圖
根據(jù)上圖的坐標(biāo)抱冷,設(shè)定好起點(diǎn)和終點(diǎn),漸變色的方向就會(huì)根據(jù)起點(diǎn)指向終點(diǎn)的方向來(lái)漸變了梢褐。
1旺遮,CAGradientLayer的坐標(biāo)系統(tǒng)是從(0赵讯,0)到(1,1)繪制的矩形
2耿眉,CAGradientLayer的frame值的size不為正方形的話瘦癌,坐標(biāo)系統(tǒng)會(huì)被拉伸
3,CAGradientLayer的startPoint和endPoint會(huì)直接決定顏色的繪制方向
4跷敬,CAGradientLayer的顏色分割點(diǎn)時(shí)以0到1的比例來(lái)計(jì)算的
下面直接上代碼讯私,里面的注視都寫好了。就不一一解釋
- 方法1(定時(shí)器漸變)
#import "ViewController.h"
@interface ViewController ()
@property (strong, nonatomic) CAGradientLayer *gradientLayer;
@property (strong, nonatomic) NSTimer *timer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//初始化imageView
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
imageView.frame = CGRectMake(0, 0, self.view.bounds.size.width, 200);
imageView.center = self.view.center;
[self.view addSubview:imageView];
//初始化漸變層
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.frame = imageView.bounds;
[imageView.layer addSublayer:self.gradientLayer];
//設(shè)置漸變顏色方向
self.gradientLayer.startPoint = CGPointMake(0, 0);
self.gradientLayer.endPoint = CGPointMake(0, 1);
//設(shè)定顏色組
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor purpleColor].CGColor];
//設(shè)定顏色分割點(diǎn)
self.gradientLayer.locations = @[@(0.5f) ,@(1.0f)];
//定時(shí)器
self.timer = [NSTimer scheduledTimerWithTimeInterval:2.0f
target:self
selector:@selector(TimerEvent)
userInfo:nil
repeats:YES];
}
- (void)TimerEvent
{
//定時(shí)改變顏色
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor colorWithRed:arc4random() % 255 / 255.0
green:arc4random() % 255 / 255.0
blue:arc4random() % 255 / 255.0
alpha:1.0].CGColor];
//定時(shí)改變分割點(diǎn)
self.gradientLayer.locations = @[@(arc4random() % 10 / 10.0f), @(1.0f)];
}
@end
- 封裝方法(類似支付寶)
//color gradient layer
- (void) insertColorGradient {
UIColor *colorOne = [UIColor colorWithRed:(255/255.0) green:(255/255.0) blue:(255/255.0) alpha:1.0];
UIColor *colorTwo = [UIColor colorWithRed:(33/255.0) green:(33/255.0) blue:(33/255.0) alpha:1.0];
NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil nil];
NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];
NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil nil];
CAGradientLayer *headerLayer = [CAGradientLayer layer];
headerLayer.colors = colors;
headerLayer.locations = locations;
headerLayer.frame = self.bounds;
[self.layer insertSublayer:headerLayer above:0];
}
- 封裝方法3
//Transparent Gradient Layer
- (void) insertTransparentGradient {
UIColor *colorOne = [UIColor colorWithRed:(33/255.0) green:(33/255.0) blue:(33/255.0) alpha:0.0];
UIColor *colorTwo = [UIColor colorWithRed:(33/255.0) green:(33/255.0) blue:(33/255.0) alpha:1.0];
//
NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil nil];
NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];
NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil nil];
//crate gradient layer
//初始化漸變層
CAGradientLayer *headerLayer = [CAGradientLayer layer];
headerLayer.colors = colors;
headerLayer.locations = locations;
headerLayer.frame = self.bounds;
[self.layer insertSublayer:headerLayer atIndex:0];
}