iOS——CALayer(圖層類)

###一、CALayer(圖層類)的基本歸納

• CALayer 是整個圖層類的基礎,它是全部核心動畫圖層類的父類。

• 和視圖類(UIView)同樣,CALayer 有本身的父圖層類,同時也擁有本身子圖層類的集合,它們構成了一個圖層樹的層次結構。

• CALayer 從 Application Kit 和 Cocoa Touch 的視圖類分離出來。

• CALayer 類的內容顯示能夠經過如下方法提供：

---

1. 能夠直接或者委託的方式把圖層的內容屬性設置爲 Core Graphics image。
2. 提供直接繪製到一個 Core Graphics image 上下文委託。
3. 設置全部圖層所具備的可視化樣式屬性,好比背景顏色、不透明屬性、蒙版、邊框、圓角等。
4. CAScrollLayer 是 CALayer 的子類,簡化顯示圖層的一部份內容。CAScrollLayer 對象的滾動區域的範圍在它的子圖層裏面定義。CAScrollLaye 不提供鍵盤或鼠標事件處理,也不提供可見的滾動條。
5. CATextLayer 能夠方便的從字符串或字符串的內容建立一個圖層類的內容。
6. CATiledLayer 容許遞增的顯示大而複雜的圖片。
7. CAEAGLLayer 提供了一個OpenGLES渲染環境。

---

• CALayer 的還擴展了 NSKeyValueCoding 的非正式協議,加入默認鍵值和額外的結構類型的自動對象包裝 (CGPoint,CGSize,CGRect,CGAffineTransform 和 CATransform3D)的支持,並 提供許多這些結構的關鍵路徑領域的訪問。

• CALayer 同時管理與層關聯的動畫和行爲。圖層接受層樹的插入和刪除層動做, 修改層的屬性,或者明確的開發請求。這些行爲一般會致使動畫發生(隱式動畫)。

• 雖然核心動畫的圖層和 Cocoa 的視圖在很大程度上沒有必定的類似性,可是他們二者**最大的區別是,圖層不會直接渲染到屏幕上。**

• 在模型-視圖-控制器(model-view-controller)概念裏面 NSView 和 UIView 是典 型的視圖部分,可是在覈心動畫裏面圖層是模型部分。圖層封裝了幾何、時間、可視 化屬性,同時它提供了圖層現實的內容,可是實際顯示的過程則不是由它來完成。

• 每一個可見的圖層樹由兩個相應的樹組成:一個是呈現樹,一個是渲染樹。

  1. 呈現樹：呈現樹包含了當前動畫發生時候將要顯示的值,例如你要給圖層背景顏色設置新 的值的時候,它會當即修改圖層樹裏面相應的值。可是在呈現樹裏面背景顏色值在將 要顯示給用戶的時候才被更新爲新值。
  2. 渲染數：渲染樹在渲染圖層的時候使用呈現樹的值。渲染樹負責執行獨立於應用活動的復 雜操做。渲染由一個單獨的進程或線程來執行,使其對應用程序的運行循環影響最小。

###二、圖層樹

• 圖層樹是核心動畫裏面相似 Cocoa 視圖的層次結構，一個核心動畫的圖層擁有父圖層(suplayer)和子圖層(sublayer)。

• 核心動畫不提供在一個窗口(window)實際顯示圖層的手段,它們必須經過視圖來託管。當視圖和圖層一塊兒的時候,視圖爲圖層提供了底層的事件處理,而圖層爲視圖提供了顯示的內容。

• iOS 上面的視圖系統直接創建在覈心動畫的圖層上面。每一個 UIView 的實例會自動的建立一個 CALayer 類的實例,而後把該實例賦值給視圖的 layer 屬性。

/*一、每個UIView都會有一個layer。
      二、將layer添加到父layer中,self.view.layer爲父圖層,layer爲子圖層。
    */
    CALayer *layer = [CALayer layer];
    layer.frame = CGRectMake(100, 100, 200, 200);
    layer.backgroundColor = [UIColor blueColor].CGColor;
    [self.view.layer addSublayer:layer];

###三、給CALayer提供內容 你能夠經過如下任何一種方法指定 CALayer 實例的內容:

1. 使用包含圖片內容的 CGImageRef 來顯式的設置圖層的 contents 的屬性。
2. 使用CALayer的子類填充內容。
3. 指定一個委託,它提供或者重繪內容。
4. 繼承 CALayer 類重載顯示的函數。

• 設置contents屬性

// 給layer添加圖片內容
    CALayer *imageLayer = [CALayer layer];
    imageLayer.frame = CGRectMake(50, 100, 200, 200);
    imageLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
    UIImage *image = [UIImage imageNamed:@"心.png"];
    imageLayer.contents = (__bridge id)(image.CGImage);
    [self.view.layer addSublayer:imageLayer];

• 使用CALayer的子類填充內容

// 填充文字的layer:CATextLayer
    CATextLayer *textLayer = [CATextLayer layer];
    textLayer.frame = CGRectMake(50, 400, 200, 30);
    textLayer.foregroundColor = [UIColor redColor].CGColor;
    textLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
    textLayer.string = @"這是填充文字的leyer";
    textLayer.fontSize = 20;
    textLayer.font = (__bridge CFTypeRef )(@"楷體");
    textLayer.alignmentMode = kCAAlignmentCenter;
    [self.view.layer addSublayer:textLayer];

• 經過建立一個委託類實現下列方法之一:displayLayer:或 drawLayer:inContext:。經過發送如下任何一個方法 setNeedsDisplay 或 者 setNeedsDisplayInRect: 的消息, 或者把圖層的 needsDisplayOnBoundsChange 屬性值設置爲 YES。

- (void)viewDidLoad {
    	[super viewDidLoad];
    	CALayer *drawLayer = [CALayer layer];
    	drawLayer.frame = CGRectMake(50, 400, 200, 200);
    	[self.view.layer addSublayer:drawLayer];
    	drawLayer.delegate = self;
    	[drawLayer setNeedsDisplay]; // 重繪
    
    }
    // CALayer的代理方法<CALayerDelegate>
    - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
   	// 畫矩形
    	CGRect rect = CGRectMake(50, 0, 100, 50);
    	CGContextSetRGBFillColor(ctx, 0.1, 0.5, 0.5, 1);
    	CGContextSetRGBStrokeColor(ctx, 1.0, 0.1, 0.1, 1);
    	CGContextAddRect(ctx, rect);
    	CGContextDrawPath(ctx, kCGPathFillStroke);
	}

• 經過子類提供圖層的內容，你的圖層須要定製行爲而委託又沒法知足需求的時候。子類能夠重載 CALayer 的顯示方法,設置圖層的內容爲適當的圖片。

###四、修改圖層內容的位置 CALayer 的屬性 contentsGravity 容許你在圖層的邊界內容修改圖層的 contents 圖片的位置或者伸縮值。默認狀況下,內容的圖像徹底填充層的邊界,忽視天然的圖像寬高比。

相應填充的位置：

1. kCAGravityTopLeft  			// 左上
	2. kCAGravityTop      			// 頂部
	3. kCAGravityTopRight 			// 右上
	4. kCAGravityLeft     			// 左
	5. kCAGravityCenter  			// 中心
	6. kCAGravityRight    			// 右
	7. kCAGravityBottomLeft 		// 左下
	8. kCAGravityBottom   			// 下
	9. kCAGravityBottomRight      // 右下
	10.kCAGravityResize           // 拉伸
	11.kCAGravityResizeAspect     // 等比例
	12.kCAGravityResizeAspectFill // 徹底填充

###五、圖層樣式屬性

• 幾何屬性：
  1. frame --座標尺寸
  2. bounds --尺寸
  3. position --定位點，子圖層的錨點在父圖層中的哪一個座標點。
  4. anchorPoint --錨點(0 ~ 1)，決定子圖層哪一個點在position點上、旋轉的支點。默認(0.5,0.5)
  5. cornerRadius --圓角弧度
  6. transform --座標變換,控制縮放、旋轉、移動。
  7. zPosition --在父圖層中的層次。
• 背景屬性：
  1. backgroundColor --背景顏色
  2. backgroundFilters --濾鏡(iOS不可用)
• 圖層內容：
  1. contents
• 子圖層內容：
  1. sublayers --設置子多個圖層
  2. masksToBounds --是否剪切超出父圖層邊界的部分,默認爲NO
  3. sublayerTransform --子圖層的座標系統
• 邊框屬性：
  1. borderColor -- 邊框的顏色
  2. borderWidth -- 邊框的寬度
• 濾鏡屬性：
  1. filters(iOS不可用)
• 陰影屬性：
  1. shadowColor --陰影顏色
  2. shadowOffset --陰影尺寸,maskToBounds不能設爲YES。
  3. shadowOpacity --陰影透明度
  4. shadowRadius --陰影圓角弧度
• 不透明屬性：
  1. opacity
• 混合屬性：
  1. compositingFilter -- 混合濾鏡(iOS不可用)
• 遮罩屬性：
  1. mask

CALayer *pLayer = [CALayer layer];
    [self.view.layer addSublayer:pLayer];
    //座標尺寸、背景顏色
    pLayer.frame = CGRectMake(50, 100, 200, 200);
    pLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
    //內容
    pLayer.contents = (__bridge id)[UIImage imageNamed:@"image.jpg"].CGImage;
    pLayer.contentsGravity = kCAGravityResize;
    // 圓角
    pLayer.cornerRadius = 20;
    pLayer.masksToBounds = YES; // 必須設爲YES圓角才起做用
    // 邊框
    pLayer.borderColor = [UIColor blackColor].CGColor;
    pLayer.borderWidth = 5;
    // 陰影
    pLayer.shadowColor = [UIColor grayColor].CGColor;
    pLayer.shadowOffset = CGSizeMake(5, 5);
    pLayer.shadowOpacity = 1;
    pLayer.shadowRadius = 10;
    //透明度
    pLayer.opacity = 0.5;
    
    //座標變換transform，縮放、旋轉、移動
    pLayer.transform = CATransform3DMakeScale(0.5, 0.5, 1);
    pLayer.transform = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);
    pLayer.transform = CATransform3DMakeTranslation(0, 50, 0);
    
    //KVC設置transform
    [pLayer setValue:@0.5 forKeyPath:@"transform.scale"];
    [pLayer setValue:@1.0 forKeyPath:@"transform.scale.x"];
    [pLayer setValue:@M_PI_4 forKeyPath:@"transform.rotation"];
    [pLayer setValue:@50 forKeyPath:@"transform.translation.y"];

###六、圖層的行爲(隱式動畫)

• 圖層的行爲在如下狀況發生的時候被觸發:從圖層樹裏面插入或者刪除一個圖層,圖層的屬性值被修改了,或者程序顯式要求。一般狀況下,行爲觸發器是動畫顯示的結果所在。

• 一個行爲對象是一個經過 CAAction 協議響應行爲標識符的對象。行爲標識符使 用標準圓點分隔的關鍵路徑來命名。圖層負責把行爲標識符映射到特定的行爲對象。 當一個特定標識符的行爲對象被肯定的時候,它會發送一個 CAAction 協議定義的消息。

• CALayer類提供了默認的CAAnimation的行爲對象實例,一個兼容類全部動畫層屬性CAAction協議。

• CALayer類提供了默認的CAAnimation的行爲對象實例,一個兼容類全部動畫層屬性CAAction協議。

// 當改變layer屬性值得時候，會自動產生一個動畫,這個動畫叫隱式動畫
	pLayer.opacity=0.0;	
	pLayer.position=CGPointMake(0.0,0.0);
	pLayer.transform = CATransform3DMakeScale(0.5, 0.5, 1);

###七、事務 圖層的每一個改變都是事務的一部分。CATransaction 是核心動畫類,它負責成批的把多個圖層樹的修改做爲一個原子更新到渲染樹。

• 隱式事務：

  1. 當圖層樹被沒有得到事務的線程修改的時候將會自動建立隱式事務,當線程的運行循環(run-loop)執行下次迭代的時候將會自動提交事務。
  2. 重要:當在一個沒有運行循環(runloop)的線程修改圖層的屬性的時候,你必須使用顯式的事務。

• 顯示事務：

  1. 在你修改圖層樹以前,能夠經過給 CATransaction 類發送一個 begin 消息來建立一 個顯式事務,修改完成以後發送 comit 消息。
  2. 你能夠在修改圖層屬性值的時候經過設置事務的 kCATransactionDisableActions或者setDisableActions 值爲 YES 來暫時禁用圖層的行爲。在事務範圍所做的任何更改也不會所以而發生的動畫。

  [CATransaction begin];
  	[CATransaction setValue:(id)kCFBooleanTrue
  	forKey:kCATransactionDisableActions];
  	//[CATransaction setDisableActions:YES];
  	[aLayer removeFromSuperlayer];

 [CATransaction commit]; ```

3. 能夠暫時改變響應改變圖層屬性的動畫的時間,經過設置事務的 `kCATransactionAnimationDuration`或者`setAnimationDuration` 鍵的值爲新的時間。

```
[CATransaction begin];
[CATransaction setValue:[NSNumber numberWithFloat:10.0f]
forKey:kCATransactionAnimationDuration];
//[CATransaction setAnimationDuration:10.0f];
theLayer.zPosition=200.0;
theLayer.opacity=0.0;
[CATransaction commit];
```

• 事務嵌套：

  顯式事務能夠被嵌套,容許你禁用部分動畫的行爲或者在屬性被修改的時候產生 的動畫使用不一樣的時間。僅當最外層的事務被提交的時候,動畫纔會發生。

[CATransaction begin];
    [CATransaction setAnimationDuration:2];
    pLayer.opacity = 0.0;
    
    [CATransaction begin];
    pLayer.transform = CATransform3DMakeScale(3, 3, 1);
    
    [CATransaction commit];
    [CATransaction commit];