圖層的樹狀結(jié)構(gòu)

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

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

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

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

圖層和視圖

如果你曾經(jīng)在iOS或者Mac OS平臺上寫過應用程序，你可能會對視圖的概念比較熟悉。一個視圖就是在屏幕上顯示的一個矩形塊（比如圖片，文字或者視頻），它能夠攔截類似于鼠標點擊或者觸摸手勢等用戶輸入。視圖在層級關系中可以互相嵌套，一個視圖可以管理它的所有子視圖的位置。圖1.1顯示了一種典型的視圖層級關系

http://wiki.jikexueyuan.com/project/ios-core-animation/images/1.1.jpeg" alt="圖1.1" title="圖1.1" width="700"/>

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

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

CALayer

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

CALayer并不清楚具體的響應鏈（iOS通過視圖層級關系用來傳送觸摸事件的機制），于是它并不能夠響應事件，即使它提供了一些方法來判斷是否一個觸點在圖層的范圍之內(nèi)（具體見第三章，“圖層的幾何學”）

平行的層級關系

每一個UIview都有一個CALayer實例的圖層屬性，也就是所謂的backing layer，視圖的職責就是創(chuàng)建并管理這個圖層，以確保當子視圖在層級關系中添加或者被移除的時候，他們關聯(lián)的圖層也同樣對應在層級關系樹當中有相同的操作（見圖1.2）。

http://wiki.jikexueyuan.com/project/ios-core-animation/images/1.2.jpeg" alt="圖1.2" title="圖1.2" width="700"/>

圖1.2 圖層的樹狀結(jié)構(gòu)（左邊）以及對應的視圖層級（右邊）

實際上這些背后關聯(lián)的圖層才是真正用來在屏幕上顯示和做動畫，UIView僅僅是對它的一個封裝，提供了一些iOS類似于處理觸摸的具體功能，以及Core Animation底層方法的高級接口。

但是為什么iOS要基于UIView和CALayer提供兩個平行的層級關系呢？為什么不用一個簡單的層級來處理所有事情呢？原因在于要做職責分離，這樣也能避免很多重復代碼。在iOS和Mac OS兩個平臺上，事件和用戶交互有很多地方的不同，基于多點觸控的用戶界面和基于鼠標鍵盤有著本質(zhì)的區(qū)別，這就是為什么iOS有UIKit和UIView，但是Mac OS有AppKit和NSView的原因。他們功能上很相似，但是在實現(xiàn)上有著顯著的區(qū)別。

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

實際上，這里并不是兩個層級關系，而是四個，每一個都扮演不同的角色，除了視圖層級和圖層樹之外，還存在呈現(xiàn)樹和渲染樹，將在第七章“隱式動畫”和第十二章“性能調(diào)優(yōu)”分別討論。

圖層的能力

如果說CALayer是UIView內(nèi)部實現(xiàn)細節(jié)，那我們?yōu)槭裁匆娴亓私馑?？蘋果當然為我們提供了優(yōu)美簡潔的UIView接口，那么我們是否就沒必要直接去處理Core Animation的細節(jié)了呢？

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

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

我們已經(jīng)證實了圖層不能像視圖那樣處理觸摸事件，那么他能做哪些視圖不能做的呢？這里有一些UIView沒有暴露出來的CALayer的功能：

• 陰影，圓角，帶顏色的邊框
• 3D變換
• 非矩形范圍
• 透明遮罩
• 多級非線性動畫

我們將會在后續(xù)章節(jié)中探索這些功能，首先我們要關注一下在應用程序當中CALayer是怎樣被利用起來的。

使用圖層

首先我們來創(chuàng)建一個簡單的項目，來操縱一些layer的屬性。打開Xcode，使用Single View Application模板創(chuàng)建一個工程。

在屏幕中央創(chuàng)建一個小視圖（大約200 X 200的尺寸），當然你可以手工編碼，或者使用Interface Builder（隨你方便）。確保你的視圖控制器要添加一個視圖的屬性以便可以直接訪問它。我們把它稱作layerView。

運行項目，應該能在淺灰色屏幕背景中看見一個白色方塊（圖1.3），如果沒看見，可能需要調(diào)整一下背景window或者view的顏色

http://wiki.jikexueyuan.com/project/ios-core-animation/images/1.3.jpeg" alt="圖1.3" title="圖1.3" width="700"/>

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

這并沒有什么令人激動的地方，我們來添加一個色塊，在白色方塊中間添加一個小的藍色塊。

我們當然可以簡單地在已經(jīng)存在的UIView上添加一個子視圖（隨意用代碼或者IB），但這不能真正學到任何關于圖層的東西。

于是我們來創(chuàng)建一個CALayer，并且把它作為我們視圖相關圖層的子圖層。盡管UIView類的接口中暴露了圖層屬性，但是標準的Xcode項目模板并沒有包含Core Animation相關頭文件。所以如果我們不給項目添加合適的庫，是不能夠使用任何圖層相關的方法或者訪問它的屬性。所以首先需要添加QuartzCore框架到Build Phases標簽（圖1.4），然后在vc的.m文件中引入<QuartzCore/QuartzCore.h>庫。

http://wiki.jikexueyuan.com/project/ios-core-animation/images/1.4.jpeg" alt="圖1.4" title="圖1.4" width="700"/>

圖1.4 把QuartzCore庫添加到項目

之后就可以在代碼中直接引用CALayer的屬性和方法。在清單1.1中，我們用創(chuàng)建了一個CALayer，設置了它的backgroundColor屬性，然后添加到layerView背后相關圖層的子圖層（這段代碼的前提是通過IB創(chuàng)建了layerView并做好了連接），圖1.5顯示了結(jié)果。

清單1.1 給視圖添加一個藍色子圖層

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
?
@end
@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    //create sublayer
    CALayer *blueLayer = [CALayer layer];
    blueLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
    blueLayer.backgroundColor = [UIColor blueColor].CGColor;
    //add it to our view
    [self.layerView.layer addSublayer:blueLayer];
}
@end

http://wiki.jikexueyuan.com/project/ios-core-animation/images/1.5.jpeg" alt="圖1.5" title="圖1.5" width="700"/>

圖1.5 白色UIView內(nèi)部嵌套的藍色CALayer

一個視圖只有一個相關聯(lián)的圖層（自動創(chuàng)建），同時它也可以支持添加無數(shù)多個子圖層，從清單1.1可以看出，你可以顯示創(chuàng)建一個單獨的圖層，并且把它直接添加到視圖關聯(lián)圖層的子圖層。盡管可以這樣添加圖層，但往往我們只是見簡單地處理視圖，他們關聯(lián)的圖層并不需要額外地手動添加子圖層。

在Mac OS平臺，10.8版本之前，一個顯著的性能缺陷就是由于用了視圖層級而不是單獨在一個視圖內(nèi)使用CALayer樹狀層級。但是在iOS平臺，使用輕量級的UIView類并沒有顯著的性能影響（當然在Mac OS 10.8之后，NSView的性能同樣也得到很大程度的提高）。

使用圖層關聯(lián)的視圖而不是CALayer的好處在于，你能在使用所有CALayer底層特性的同時，也可以使用UIView的高級API（比如自動排版，布局和事件處理）。

然而，當滿足以下條件的時候，你可能更需要使用CALayer而不是UIView

• 開發(fā)同時可以在Mac OS上運行的跨平臺應用
• 使用多種CALayer的子類（見第六章，“特殊的圖層“），并且不想創(chuàng)建額外的UIView去包封裝它們所有
• 做一些對性能特別挑剔的工作，比如對UIView一些可忽略不計的操作都會引起顯著的不同（盡管如此，你可能會直接想使用OpenGL繪圖）

但是這些例子都很少見，總的來說，處理視圖會比單獨處理圖層更加方便。

總結(jié)

這一章闡述了圖層的樹狀結(jié)構(gòu)，說明了如何在iOS中由UIView的層級關系形成的一種平行的CALayer層級關系，在后面的實驗中，我們創(chuàng)建了自己的CALayer，并把它添加到圖層樹中。

在第二章，“圖層關聯(lián)的圖片”，我們將要研究一下CALayer關聯(lián)的圖片，以及Core Animation提供的操作顯示的一些特性。