CALayer

 

http://blog.sina.com.cn/s/blog_859ab33601012nlt.html

 

研究Core Animation已經有段時間了，關於Core Animation，網上沒什麼好的介紹。蘋果網站上有篇專門的總結性介紹，可是彷佛原理性的東西很少，看得人云山霧罩，感受，寫那篇東西的人，實際上是假設讀的人瞭解界面動畫技術的原理的。今天有點別的事情要使用Linux，忘掉了ssh的密碼，沒辦法從新設ssh，結果怎麼也想不起來怎麼設ssh遠程登錄了，沒辦法又到網上查了一遍，太浪費時間了，痛感忘記記筆記是多麼可怕的事情。鑑於Core Animation的內容實在是很是繁雜，應用的Obj-C語言自己的特性也不少，因此寫個備忘錄記錄一下，懂的人看了後若是發現了錯誤，還不吝指教。

1.UIView是iOS系統中界面元素的基礎，全部的界面元素都繼承自它。它自己徹底是由CoreAnimation來實現的（Mac下彷佛不是這樣）。它真正的繪圖部分，是由一個叫CALayer（Core Animation Layer）的類來管理。UIView自己，更像是一個CALayer的管理器，訪問它的跟繪圖和跟座標有關的屬性，例如frame，bounds等等，實際上內部都是在訪問它所包含的CALayer的相關屬性。

2.UIView有個layer屬性，能夠返回它的主CALayer實例，UIView有一個layerClass方法，返回主layer所使用的類，UIView的子類，能夠經過重載這個方法，來讓UIView使用不一樣的CALayer來顯示，例如經過
1
- (class) layerClass {
2
  return ([CAEAGLLayer class]);
3
}
使某個UIView的子類使用GL來進行繪製。

3.UIView的CALayer相似UIView的子View樹形結構，也能夠向它的layer上添加子layer，來完成某些特殊的表示。例以下面的代碼
1
grayCover = [[CALayer alloc] init];
2
grayCover.backgroundColor = [[[UIColor blackColor] colorWithAlphaComponent:0.2] CGColor];
3
[self.layer addSubLayer: grayCover];
會在目標View上敷上一層黑色的透明薄膜。

4.UIView的layer樹形在系統內部，被系統維護着三份copy（這段理解有點吃不許）。
第一份，邏輯樹，就是代碼裏能夠操縱的，例如更改layer的屬性等等就在這一份。
第二份，動畫樹，這是一箇中間層，系統正在這一層上更改屬性，進行各類渲染操做。
第三份，顯示樹，這棵樹的內容是當前正被顯示在屏幕上的內容。
這三棵樹的邏輯結構都是同樣的，區別只有各自的屬性。

5.動畫的運做
UIView的主layer之外（我以爲是這樣），對它的subLayer，也就是子layer的屬性進行更改，系統將自動進行動畫生成，動畫持續時間有個缺省時間，我的感受大概是0.5秒。在動畫時間裏，系統自動斷定哪些屬性更改了，自動對更改的屬性進行動畫插值，生成中間幀而後連續顯示產生動畫效果。

6.座標系系統（對position和anchorPoint的關係仍是犯暈）
CALayer的座標系系統和UIView有點不同，它多了一個叫anchorPoint的屬性，它使用CGPoint結構，可是值域是0~1，也就是按照比例來設置。這個點是各類圖形變換的座標原點，同時會更改layer的position的位置，它的缺省值是{0.5, 0.5}，也就是在layer的中央。
某layer.anchorPoint = CGPointMake(0.f, 0.f);
若是這麼設置，layer的左上角就會被挪到原來的中間的位置，
加上這樣一句就行了
某layer.position = CGPointMake(0.f, 0.f);

7.真實例子的分析

   
這是iphone上iBook翻頁的效果，假設每一頁都是一個UIView，我以爲一個頁面是貼了倆個Layer，文字Layer顯示正面的內容，背面layer用文字layer的快照作affine翻轉，貼在文字layer的後面。由於Layer能夠設置顯示陰影，也許後面的陰影效果沒有使用單獨的一個layer來顯示。至於這個曲面效果，我查了不少資料也沒有結果，估計是使用了GL的曲面繪圖？

8.最後一個讓人噁心的。
layer能夠設置圓角顯示，例如UIButton的效果，也能夠設置陰影顯示，可是若是layer樹中的某個layer設置了圓角，樹中全部layer的陰影效果都將顯示不了了。若是既想有圓角又想要陰影，好像只能作兩個重疊的UIView，一個的layer顯示圓角，一個的layer顯示陰影.....

 

 

CALayer屬於Core Animation部分的內容，比較重要而不太好理解。如下是園子中看到的一篇文章的摘錄：

1. UIView是iOS系統中界面元素的基礎，全部的界面元素都是繼承自它。它自己徹底是由CoreAnimation來實現的。它真正的繪圖部分，是由一個CALayer類來管理。UIView自己更像是一個CALayer的管理器，訪問它的跟繪圖和跟座標有關的屬性，例如frame，bounds等，實際上內部都是在訪問它所包含的CALayer的相關屬性。

2. UIView有個重要屬性layer，能夠返回它的主CALayer實例。

// 要訪問層，讀取UIView實例的layer屬性
CALayer *layer = myView.layer

全部從UIView繼承來的對象都繼承了這個屬性。這意味着你能夠轉換、縮放、旋轉，甚至能夠在Navigation bars，Tables，Text boxes等其它的View類上增長動畫。每一個UIView都有一個層，控制着各自的內容最終被顯示在屏幕上的方式。
UIView的layerClass方法，能夠返回主layer所使用的類，UIView的子類能夠經過重載這個方法，來讓UIView使用不一樣的CALayer來顯示。代碼示例：

- (class)layerClass {
   return ([CAEAGLLayer class]);
}

上述代碼使得某個UIView的子類使用GL來進行繪製。

3. UIView的CALayer相似UIView的子View樹形結構，也能夠向它的layer上添加子layer，來完成某些特殊的表示。即CALayer層是能夠嵌套的。示例代碼：

grayCover = [[CALayer alloc] init];
grayCover.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.2] CGColor];
[self.layer addSubLayer:grayCover];

上述代碼會在目標View上敷上一層黑色透明薄膜的效果。

4. UIView的layer樹形在系統內部，被維護着三份copy。分別是邏輯樹，這裏是代碼能夠操縱的；動畫樹，是一箇中間層，系統就在這一層上更改屬性，進行各類渲染操做；顯示樹，其內容就是當前正被顯示在屏幕上得內容。

5. 動畫的運做：對UIView的subLayer（非主Layer）屬性進行更改，系統將自動進行動畫生成，動畫持續時間的缺省值彷佛是0.5秒。

6. 座標系統：CALayer的座標系統比UIView多了一個anchorPoint屬性，使用CGPoint結構表示，值域是0~1，是個比例值。這個點是各類圖形變換的座標原點，同時會更改layer的position的位置，它的缺省值是{0.5,0.5}，即在layer的中央。
某layer.anchorPoint = CGPointMake(0.f,0.f);
若是這麼設置，只會將layer的左上角被挪到原來的中間位置，必須加上這一句：
某layer.position = CGPointMake(0.f,0.f);

最後：layer能夠設置圓角顯示（cornerRadius），也能夠設置陰影 (shadowColor)。可是若是layer樹中某個layer設置了圓角，樹種全部layer的陰影效果都將不顯示了。所以如果要有圓角又要陰影，變通方法只能作兩個重疊的UIView，一個的layer顯示圓角，一個layer顯示陰影......

7.渲染：當更新層，改變不能當即顯示在屏幕上。當全部的層都準備好時，能夠調用setNeedsDisplay方法來重繪顯示。

[gameLayer setNeedsDisplay];

若要重繪部分屏幕區域，請使用setNeedsDisplayInRect:方法，經過在CGRect結構的區域更新：

[gameLayer setNeedsDisplayInRect:CGRectMake(150.0,100.0,50.0,75.0)];

若是是用的Core Graphics框架來執行渲染的話，能夠直接渲染Core Graphics的內容。用renderInContext:來作這個事。

[gameLayer renderInContext:UIGraphicsGetCurrentContext()];

8.變換：要在一個層中添加一個3D或仿射變換，能夠分別設置層的transform或affineTransform屬性。

characterView.layer.transform = CATransform3DMakeScale(-1.0,-1.0,1.0);

CGAffineTransform transform = CGAffineTransformMakeRotation(45.0);
backgroundView.layer.affineTransform = transform;

9.變形：Quartz Core的渲染能力，使二維圖像能夠被自由操縱，就好像是三維的。圖像能夠在一個三維座標系中以任意角度被旋轉，縮放和傾斜。CATransform3D的一套方法提供了一些魔術般的變換效果。