# CAGradientLayer `CAGradientLayer`是用來生成兩種或更多顏色平滑漸變的。用Core Graphics復制一個`CAGradientLayer`并將內容繪制到一個普通圖層的寄宿圖也是有可能的，但是`CAGradientLayer`的真正好處在于繪制使用了硬件加速。 ## 基礎漸變 我們將從一個簡單的紅變藍的對角線漸變開始（見清單6.6）.這些漸變色彩放在一個數組中，并賦給`colors`屬性。這個數組成員接受`CGColorRef`類型的值（并不是從`NSObject`派生而來），所以我們要用通過bridge轉換以確保編譯正常。 `CAGradientLayer`也有`startPoint`和`endPoint`屬性，他們決定了漸變的方向。這兩個參數是以單位坐標系進行的定義，所以左上角坐標是{0, 0}，右下角坐標是{1, 1}。代碼運行結果如圖6.6 清單6.6 簡單的兩種顏色的對角線漸變 ~~~ @interface ViewController () @property (nonatomic, weak) IBOutlet UIView *containerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; //create gradient layer and add it to our container view CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = self.containerView.bounds; [self.containerView.layer addSublayer:gradientLayer]; //set gradient colors gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor]; //set gradient start and end points gradientLayer.startPoint = CGPointMake(0, 0); gradientLayer.endPoint = CGPointMake(1, 1); } @end ~~~  圖6.6 用`CAGradientLayer`實現簡單的兩種顏色的對角線漸變 ## 多重漸變 如果你愿意，`colors`屬性可以包含很多顏色，所以創建一個彩虹一樣的多重漸變也是很簡單的。默認情況下，這些顏色在空間上均勻地被渲染，但是我們可以用`locations`屬性來調整空間。`locations`屬性是一個浮點數值的數組（以`NSNumber`包裝）。這些浮點數定義了`colors`屬性中每個不同顏色的位置，同樣的，也是以單位坐標系進行標定。0.0代表著漸變的開始，1.0代表著結束。 `locations`數組并不是強制要求的，但是如果你給它賦值了就一定要確保`locations`的數組大小和`colors`數組大小一定要相同，否則你將會得到一個空白的漸變。 清單6.7展示了一個基于清單6.6的對角線漸變的代碼改造。現在變成了從紅到黃最后到綠色的漸變。`locations`數組指定了0.0，0.25和0.5三個數值，這樣這三個漸變就有點像擠在了左上角。（如圖6.7）. 清單6.7 在漸變上使用`locations` ~~~ - (void)viewDidLoad { [super viewDidLoad]; //create gradient layer and add it to our container view CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.frame = self.containerView.bounds; [self.containerView.layer addSublayer:gradientLayer]; //set gradient colors gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id) [UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor]; //set locations gradientLayer.locations = @[@0.0, @0.25, @0.5]; //set gradient start and end points gradientLayer.startPoint = CGPointMake(0, 0); gradientLayer.endPoint = CGPointMake(1, 1); } ~~~  圖6.7 用`locations`構造偏移至左上角的三色漸變