UI進階第十發:Quartz 2D CAlayer

CAlayer
簡介：
首先
CALayer是定義在QuartzCore框架中的(Core Animation)
CGImageRef、CGColorRef兩種數據類型是定義在CoreGraphics框架中的
UIColor、UIImage是定義在UIKit框架中的

其次
QuartzCore框架和CoreGraphics框架是可以跨平臺使用的，在iOS和Mac OS X上都能使用

但是UIKit只能在iOS中使用

爲了保證可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

1.CALayer和UIView的關係
 (1)CALayer負責視圖中顯示的內容和動畫（只顯示的時候使用），沒有事件處理，性能高，輕量級
 (2)UIView負責監聽和響應事件（與用戶交互的時候使用）
 (3)默認UIImageView的圖片不是添加到主層的，是在contents上面

2.原理：
  (UIView本身不具備顯示的功能，是它內部的完全是UIView內部有一個CALayer對象（圖層）纔有顯示功能)
  1>在創建UIView對象時，UIView內部會自動創建一個圖層(即CALayer對象)，通過UIView的layer屬性可以訪問這個層
  @property(nonatomic,readonly,retain) CALayer *layer;
  2>當UIView需要顯示到屏幕上時，會調用drawRect:方法進行繪圖，並且會將所有內容繪製在自己的圖層上，繪圖完畢後，系統會將圖層拷貝到屏幕上，於是就完成了UIView的顯示

3.通過訪問layer設置UIView

寬度和高度
@property CGRect bounds;
位置(默認指中點，具體由anchorPoint決定)
@property CGPoint position;
錨點(x,y的範圍都是0-1)，決定了position的含義
@property CGPoint anchorPoint;
背景顏色(CGColorRef類型)
@property CGColorRef backgroundColor;

形變屬性
@property CATransform3D transform;

邊框顏色(CGColorRef類型)
@property CGColorRef borderColor;
邊框寬度
@property CGFloat borderWidth;
圓角半徑
@property CGFloat cornerRadius;
內容(比如設置爲圖片CGImageRef)
@property(retain) id contents;

陰影屬性
陰影顏色
@property CGColorRef shadowColor;
陰影不透明(0.0 ~ 1.0)
@property float shadowOpacity;
陰影偏移位置
@property CGSize shadowOffset;

4.重要屬性：position和anchorPoint

@property CGPoint position;
// 描述自己在父控件的位置
用來設置CALayer在父層中的位置
以父層的左上角爲原點(0, 0)

@property CGPoint anchorPoint;
// 描述自身的哪個點在positon上
稱爲“定位點”、“錨點”
決定着CALayer身上的哪個點會在position屬性所指的位置
以自己的左上角爲原點(0, 0)
它的x、y取值範圍都是0~1，默認值爲（0.5, 0.5）

5.隱式動畫（CAlayer的形變）：
1>前提：
  每一個UIView內部都默認關聯着一個CALayer，我們可用稱這個Layer爲Root Layer（根層）
  所有的非Root Layer，也就是手動創建的CALayer對象，都存在着隱式動畫
2>概念：
  (1)當對非Root Layer的部分屬性進行修改時，默認會自動產生一些動畫效果
  (2)能產生動畫的這些屬性稱爲Animatable Properties(可動畫屬性)
3>屬性
bounds：用於設置CALayer的寬度和高度。修改這個屬性會產生縮放動畫
backgroundColor：用於設置CALayer的背景色。修改這個屬性會產生背景色的漸變動畫
position：用於設置CALayer的位置。修改這個屬性會產生平移動畫

關閉隱式動畫：(默認每個動畫都會包裝成一個事務)
可以通過動畫事務(CATransaction)關閉默認的隱式動畫效果
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];

6.相關代碼：
#pragma mark－ CAlayer隱式動畫基本屬性使用
@property (strong, nonatomic) IBOutlet UIView *testView;
- (void) layer
{
    // 設置陰影 shadowOpacity：默認是0，透明，不顯示
    _testView.layer.shadowOpacity = 1;
    // 設置陰影顏色
    _testView.layer.shadowColor = [UIColor yellowColor].CGColor;
    // 設置陰影圓角顯示
    _testView.layer.shadowRadius = 30;
    // 設置陰影偏移
    _testView.layer.shadowOffset = CGSizeMake(30, 30);
   
    // 設置圖片半徑
    _testView.layer.cornerRadius = 50;
    // 設置邊框
    _testView.layer.borderWidth = 3;
    // 設置邊框顏色
    _testView.layer.borderColor = [UIColor blueColor].CGColor;
}

#pragma mark－ 裁剪圖片

    // 裁剪圖片（操作圖層）默認UIImageView的圖片不是添加到主層的，是在contents上面

    // 設置圓角半徑只會影響主層
    _imageView.layer.cornerRadius = 50;
    // 超出主層的部分全部剪掉
    _imageView.layer.masksToBounds = YES;
   
    // 設置邊框
    _imageView.layer.borderWidth = 10;
    // 顏色要轉換 UIKit －－> CoreGraphirs
    _imageView.layer.borderColor = [UIColor redColor].CGColor;

#pragma mark－ 自定義CAlayer
    // 創建CAlayer

    CALayer *layer = [CALayer layer];

    // 設置顏色

    layer.backgroundColor = [UIColor redColor].CGColor;

    // 設置frame

    layer.frame = CGRectMake(0, 0, 100, 100);

    // 添加圖片

    layer.contents = (id)[UIImage imageNamed:@"阿狸頭像"].CGImage;

    //添加到視圖
    [self.view.layer addSublayer:layer];