OCiOS開發：CAGradientLayer 漸變色
CAGradientLayer 簡介
- CAGradientLayer是CALayer圖層類的子類，用於處理漸變色的層結構。
- CAGradientLayer的漸變色可以做隱式動畫。
- CAGradientLayer和CAShapeLayer配合使用可實現復雜效果。
- CAGradientLayer可以用作PNG的遮罩效果。
CAGradientLayer 坐標系統
- CAGradientLayer的坐標系統是從坐標（0，0）到（1，1）繪制的矩形。
- CAGradientLayer的frame值的size不為正方形的話，坐標系統會被拉伸。
- CAGradientLayer的startPoint與endPoint會直接影響顏色的繪制方向。
- CAGradientLayer的顏色分割點是以0~1的比例來計算的，顏色分割點為漸變色開始或終止的地方。
CAGradientLayer 屬性介紹
- colors：漸變顏色數組
- locations：漸變顏色的區間分布（分割點），locations的數組長度和colors一致。這個屬性可不設，默認是nil，系統會平均分布顏色如果有特定需要可設置，數組設置為0 ~ 1之間單調遞增。
- startPoint：映射locations中起始位置，用單位向量表示。比如（0, 0）表示從左上角開始變化。默認值是：(0.5, 0.0)。
- endPoint：映射locations中結束位置，用單位向量表示。比如（1, 1）表示到右下角變化結束。默認值是：(0.5, 1.0)。
- type：默認值是kCAGradientLayerAxial，表示按像素均勻變化。
CAGradientLayer 案例
三原色漸變
- 效果展示
- 代碼示例
- (void)viewDidLoad {
[super viewDidLoad];
/**< 初始化colorsView */
UIView *colorsView = [[UIView alloc] init];
colorsView.bounds = CGRectMake(0, 0, 220, 220);
colorsView.center = self.view.center;
[self.view addSubview:colorsView];
/**< 初始化漸變層 */
CAGradientLayer *gradientColorLayer = [CAGradientLayer layer];
gradientColorLayer.frame = colorsView.bounds;
[colorsView.layer addSublayer:gradientColorLayer];
/**< 設置顏色組 */
gradientColorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
/**< 設置顏色分割點 */
gradientColorLayer.locations = @[@(0.25), @(0.5), @(0.75)];
/**< 設置漸變顏色方向 */
// 1、起始位置
gradientColorLayer.startPoint = CGPointMake(0, 0);
// 2、結束位置
gradientColorLayer.endPoint = CGPointMake(0, 1);
}
- 分割點動畫
- 效果展示
- 代碼示例
#import "ViewController.h"
@interface ViewController ()
@property (strong, nonatomic) CAGradientLayer *gradientLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 添加 CAGradientLayer
[self.view.layer addSublayer:self.gradientLayer];
// 延時3秒執行，實現分割點動畫（隱式動畫）
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(4.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
// 顏色分割點效果
self.gradientLayer.locations = @[@(0.4), @(0.5), @(0.6)];
});
}
#pragma mark - Getter methods
- (CAGradientLayer *)gradientLayer {
if (!_gradientLayer) {
// 初始化並創建
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = CGRectMake(0, 0, 250, 250);
_gradientLayer.position = self.view.center;
_gradientLayer.borderWidth = 1.f;
// 設置顏色
_gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
// 設置顏色漸變方向
_gradientLayer.startPoint = CGPointMake(0, 0);
_gradientLayer.endPoint = CGPointMake(1, 0);
// 設置顏色分割點
_gradientLayer.locations = @[@(0.25), @(0.5), @(0.75)];
}
return _gradientLayer;
}
@end
色差動畫
- 實現思路
- 確定漸變色漸變方向；
- 至少設定兩種顏色，此處設置兩種顏色為例，其中一種是透明色，另外一種是自定義顏色。
- 設定好locations顏色分割點。
- 效果展示
- 代碼示例
#import "ViewController.h"
@interface ViewController () {
NSTimer *_timer; /**< 定時器 */
}
@property (strong, nonatomic) CAGradientLayer *gradientLayer; /**< 漸變層 */
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blackColor];
// 創建背景圖片
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image"]];
imageView.bounds = CGRectMake(0, 0, 260, 450);
imageView.center = self.view.center;
[self.view addSubview:imageView];
// 添加漸變層
[imageView.layer addSublayer:self.gradientLayer];
// 初始化定時器
_timer = [NSTimer scheduledTimerWithTimeInterval:1.f
target:self
selector:@selector(respondsToTimerEvent)
userInfo:nil
repeats:YES];
}
#pragma mark - Timer and animations methods
- (void)respondsToTimerEvent {
// 設定顏色組動畫
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor colorWithRed:arc4random()%255 / 255.f
green:arc4random()%255 / 255.f
blue:arc4random()%255 / 255.f
alpha:1].CGColor];
// 設置顏色分割點動畫
self.gradientLayer.locations = @[@(arc4random() %10 / 10.f), @(1.f)];
}
#pragma mark - Getter methods
- (CAGradientLayer *)gradientLayer {
if (!_gradientLayer) {
// 初始化漸變層
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = CGRectMake(0, 0, 260, 450);
// 設置顏色漸變方向
_gradientLayer.startPoint = CGPointMake(0, 0);
_gradientLayer.endPoint = CGPointMake(0, 1);
// 設定顏色組
_gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
// 設定顏色分割點
_gradientLayer.locations = @[@(0.5f), @(1.f)];
}
return _gradientLayer;
}
@end