CAGradientLayer 漸變圖層
CAGradientLayer 是 CALayer 的子類辐马，用來制作漸變效果的圖層。
屬性介紹
colors //漸變顏色的數(shù)組(CGColorRef對象)
locations //漸變顏色位置局义，[0-1]范圍喜爷，遞增，數(shù)量和colors數(shù)量相等萄唇，否則無效
startPoint //漸變的起點(diǎn),[0,0]-[1,1]檩帐。[0,0]是左下角，[1,1]是右上角湃密。默認(rèn)值分別為[.5,0]和[.5,1]
endPoint //漸變的終點(diǎn),[0,0]-[1,1]四敞。
示例
-
矩形漸變圖層
這里寫圖片描述
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(0, 64, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height-64); //設(shè)置顯示的frame
gradientLayer.colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; //設(shè)置漸變顏色
// gradientLayer.locations = @[@0.0, @0.2, @0.5]; //顏色的起點(diǎn)位置，遞增忿危，并且數(shù)量跟顏色數(shù)量相等
gradientLayer.startPoint = CGPointMake(0, 0); //
gradientLayer.endPoint = CGPointMake(1, 0); //
[self.view.layer addSublayer:gradientLayer]; //將圖層添加到視圖的圖層上
- 不規(guī)則形狀
由于 CAGradientLayer 不支持路徑填充达箍，所以只能繪制矩形的漸變。我們可以通過遮罩層 來顯示不規(guī)則漸變圖層缎玫，使用 CAShapeLayer 賦值給 CAGradientLayer 的 mask 屬性解滓，及可實(shí)現(xiàn)不規(guī)則圖形的漸變效果赃磨。mask 也可以是圖像等其他內(nèi)容，重疊的部分會被顯示洼裤，否則被隱藏煞躬。
這里寫圖片描述
// 獲取隨機(jī)數(shù)
#define getRandomNumberFromAtoB(A,B) (int)(A+(arc4random()%(B-A+1)))
// 貝塞爾曲線逸邦，生成隨機(jī)路徑
UIBezierPath *path = [UIBezierPath bezierPath];
NSInteger num = 50;
CGFloat itemWidth = [UIScreen mainScreen].bounds.size.width/num;
for (int i=0; i<=num; i++) {
if (i) {
[path addLineToPoint:CGPointMake(i*itemWidth, getRandomNumberFromAtoB(100, 200))];
}
else{
[path moveToPoint:CGPointMake(i*itemWidth, getRandomNumberFromAtoB(100, 200))];
}
}
[path addLineToPoint:CGPointMake([UIScreen mainScreen].bounds.size.width, 300)];
[path addLineToPoint:CGPointMake(0, 300)];
[path closePath];
// 創(chuàng)建 ShapeLayer
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path.CGPath;
// 設(shè)置漸變層的 mask 遮罩層
gradientLayer.mask = maskLayer;
Core Graphics 實(shí)現(xiàn)漸變色
CAGradientLayer 是對 Core Graphics 底層的一個面向?qū)ο蟮姆庋b實(shí)現(xiàn)，我們直接使用 Core Graphics 來實(shí)現(xiàn)漸變色雷客。Core Graphics 庫中有兩個方法用于繪制漸變顏色：CGContextDrawLinearGradient桥狡、CGContextDrawRadialGradient皱卓，前者可生成線性漸變，后者可生成徑向漸變娜汁。Core Graphics 可以通過 CGMutablePathRef來繪制出各種形狀里的漸變效果兄朋。
示例
- 線性漸變
這里寫圖片描述
- 首先創(chuàng)建一個path（形狀）
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, 0, 100);
CGPathAddLineToPoint(path, NULL, [UIScreen mainScreen].bounds.size.width, 150);
CGPathAddLineToPoint(path, NULL, [UIScreen mainScreen].bounds.size.width, 400);
CGPathAddLineToPoint(path, NULL, 0, 350);
CGPathCloseSubpath(path);
- 給 path 設(shè)置漸變效果
NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; // 漸變色數(shù)組
//為了將上下文本中的內(nèi)容生成圖像
UIGraphicsBeginImageContext(self.view.bounds.size);
//創(chuàng)建CGContextRef
CGContextRef context = UIGraphicsGetCurrentContext(); // 上下文
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
//CGFloat locations[] = { 0.0, 0.3, 1.0 }; // 顏色位置設(shè)置,要跟顏色數(shù)量相等，否則無效
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, NULL); // 漸變顏色效果設(shè)置
//獲取到起止點(diǎn)
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));
CGContextSaveGState(context);
CGContextAddPath(context, path); // 上下文添加路徑
CGContextClip(context);
// 繪制線性漸變
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);
// 需要手動釋放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
CGPathRelease(path);
- 從當(dāng)前上下文獲取圖像并顯示
// 從Context中獲取圖像傅事，并顯示在界面上
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
[self.view addSubview:imgView];
-
徑向漸變
這里寫圖片描述
NSArray *colors = @[(id)[UIColor redColor].CGColor,(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor]; //漸變色數(shù)組
UIGraphicsBeginImageContext(self.view.bounds.size);
//創(chuàng)建CGContextRef
CGContextRef context = UIGraphicsGetCurrentContext(); //上下文文本
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, NULL); // 漸變顏色效果設(shè)置
//獲取圓心和半徑
CGRect pathRect = CGPathGetBoundingBox(path);
CGPoint center = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMidY(pathRect));
CGFloat radius = MAX(pathRect.size.width / 2.0, pathRect.size.height / 2.0) * sqrt(2);
CGContextSaveGState(context);
CGContextAddPath(context, path); //添加路徑
CGContextClip(context);
//繪制徑向漸變
CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, kCGGradientDrawsBeforeStartLocation);
CGContextRestoreGState(context);
//需要手動釋放
CGGradientRelease(gradient);
CGColorSpaceRelease(colorSpace);
CGPathRelease(path);
Demo地址
總結(jié)
使用 Core Graphics 實(shí)現(xiàn)漸變效果相對麻煩蹭越，幸好官方幫你進(jìn)行了封裝產(chǎn)生了 CAGradientLayer 漸變圖層對象教届。有了 CAGradientLayer 對象實(shí)現(xiàn)漸變效果變得簡單無比。
