圖層樹、寄宿圖以及圖層幾何學
（一）圖層的樹狀結構

巨妖有圖層，洋蔥也有圖層，你有嗎？我們都有圖層 -- 史萊克

Core Animation其實是一個令人誤解的命名。你可能認為它只是用來做動畫的，但實際上它是從一個叫做Layer Kit這麼一個不怎麼和動畫有關的名字演變而來，所以做動畫這只是Core Animation特性的冰山一角。

Core Animation是一個複合引擎，它的職責就是儘可能快地組合螢幕上不同的可視內容，這個內容是被分解成獨立的圖層，儲存在一個叫做圖層樹的體系之中。於是這個樹形成了UIKit以及在iOS應用程式當中你所能在螢幕上看見的一切的基礎。

在我們討論動畫之前，我們將從圖層樹開始，涉及一下Core Animation的靜態組合以及佈局特性。

圖層和檢視

如果你曾經在iOS或者Mac OS平臺上寫過應用程式，你可能會對檢視的概念比較熟悉。一個檢視就是在螢幕上顯示的一個矩形塊（比如圖片，文字或者視訊），它能夠攔截類似於滑鼠點選或者觸控手勢等使用者輸入。檢視在層級關係中可以互相巢狀，一個檢視可以管理它的所有子檢視的位置。圖1.1顯示了一種典型的檢視層級關係

圖1.1 一種典型的iOS螢幕（左邊）和形成檢視的層級關係（右邊）

在iOS當中，所有的檢視都從一個叫做UIVIew的基類派生而來，UIView可以處理觸控事件，可以支援基於Core Graphics繪圖，可以做仿射變換（例如旋轉或者縮放），或者簡單的類似於滑動或者漸變的動畫。

CALayer

CALayer類在概念上和UIView類似，同樣也是一些被層級關係樹管理的矩形塊，同樣也可以包含一些內容（像圖片，文字或者背景色），管理子圖層的位置。它們有一些方法和屬性用來做動畫和變換。和UIView最大的不同是CALayer不處理使用者的互動。

CALayer並不清楚具體的響應鏈（iOS通過檢視層級關係用來傳送觸控事件的機制），於是它並不能夠響應事件，即使它提供了一些方法來判斷是否一個觸點在圖層的範圍之內（具體見第三章，“圖層的幾何學”）

平行的層級關係

每一個UIview都有一個CALayer例項的圖層屬性，也就是所謂的backing layer，檢視的職責就是建立並管理這個圖層，以確保當子檢視在層級關係中新增或者被移除的時候，他們關聯的圖層也同樣對應在層級關係樹當中有相同的操作（見圖1.2）。

圖1.2 圖層的樹狀結構（左邊）以及對應的檢視層級（右邊）

實際上這些背後關聯的圖層才是真正用來在螢幕上顯示和做動畫，UIView僅僅是對它的一個封裝，提供了一些iOS類似於處理觸控的具體功能，以及Core Animation底層方法的高階介面。

但是為什麼iOS要基於UIView和CALayer提供兩個平行的層級關係呢？為什麼不用一個簡單的層級來處理所有事情呢？原因在於要做職責分離，這樣也能避免很多重複程式碼。在iOS和Mac OS兩個平臺上，事件和使用者互動有很多地方的不同，基於多點觸控的使用者介面和基於滑鼠鍵盤有著本質的區別，這就是為什麼iOS有UIKit和UIView，但是Mac OS有AppKit和NSView的原因。他們功能上很相似，但是在實現上有著顯著的區別。

繪圖，佈局和動畫，相比之下就是類似Mac筆記本和桌面系列一樣應用於iPhone和iPad觸屏的概念。把這種功能的邏輯分開並應用到獨立的Core Animation框架，蘋果就能夠在iOS和Mac OS之間共享程式碼，使得對蘋果自己的OS開發團隊和第三方開發者去開發兩個平臺的應用更加便捷。

實際上，這裡並不是兩個層級關係，而是四個，每一個都扮演不同的角色，除了檢視層級和圖層樹之外，還存在呈現樹和渲染樹，將在第七章“隱式動畫”和第十二章“效能調優”分別討論。

圖層的能力

如果說CALayer是UIView內部實現細節，那我們為什麼要全面地瞭解它呢？蘋果當然為我們提供了優美簡潔的UIView介面，那麼我們是否就沒必要直接去處理Core Animation的細節了呢？

某種意義上說的確是這樣，對一些簡單的需求來說，我們確實沒必要處理CALayer，因為蘋果已經通過UIView的高階API間接地使得動畫變得很簡單。

但是這種簡單會不可避免地帶來一些靈活上的缺陷。如果你略微想在底層做一些改變，或者使用一些蘋果沒有在UIView上實現的介面功能，這時除了介入Core Animation底層之外別無選擇。

我們已經證實了圖層不能像檢視那樣處理觸控事件，那麼他能做哪些檢視不能做的呢？這裡有一些UIView沒有暴露出來的CALayer的功能：

• 陰影，圓角，帶顏色的邊框

• 3D變換

• 非矩形範圍

• 透明遮罩

• 多級非線性動畫

我們將會在後續章節中探索這些功能，首先我們要關注一下在應用程式當中CALayer是怎樣被利用起來的。

使用圖層

首先我們來建立一個簡單的專案，來操縱一些layer的屬性。開啟Xcode，使用Single View Application模板建立一個工程。

在螢幕中央建立一個小檢視（大約200 X 200的尺寸），當然你可以手工編碼，或者使用Interface Builder（隨你方便）。確保你的檢視控制器要新增一個檢視的屬性以便可以直接訪問它。我們把它稱作layerView。

執行專案，應該能在淺灰色螢幕背景中看見一個白色方塊（圖1.3），如果沒看見，可能需要調整一下背景window或者view的顏色

圖1.3 灰色背景上的一個白色UIView

這並沒有什麼令人激動的地方，我們來新增一個色塊，在白色方塊中間新增一個小的藍色塊。

我們當然可以簡單地在已經存在的UIView上新增一個子檢視（隨意用程式碼或者IB），但這不能真正學到任何關於圖層的東西。

於是我們來建立一個CALayer，並且把它作為我們檢視相關圖層的子圖層。儘管UIView類的介面中暴露了圖層屬性，但是標準的Xcode專案模板並沒有包含Core Animation相關標頭檔案。所以如果我們不給專案新增合適的庫，是不能夠使用任何圖層相關的方法或者訪問它的屬性。所以首先需要新增QuartzCore框架到Build Phases標籤（圖1.4），然後在vc的.m檔案中引入庫。

圖1.4 把QuartzCore庫新增到專案

之後就可以在程式碼中直接引用CALayer的屬性和方法。在清單1.1中，我們用建立了一個CALayer，設定了它的backgroundColor屬性，然後新增到layerView背後相關圖層的子圖層（這段程式碼的前提是通過IB建立了layerView並做好了連線），圖1.5顯示了結果。

清單1.1 給檢視新增一個藍色子圖層