變換
很不幸宰掉，沒人能告訴你母體是什么呵哨，你只能自己體會 -- 駭客帝國
在第四章“可視效果”中，我們研究了一些增強(qiáng)圖層和它的內(nèi)容顯示效果的一些技術(shù)轨奄，在這一章中孟害，我們將要研究可以用來對圖層旋轉(zhuǎn)，擺放或者扭曲的CGAffineTransform挪拟，以及可以將扁平物體轉(zhuǎn)換成三維空間對象的CATransform3D（而不是僅僅對圓角矩形添加下沉陰影）挨务。
仿射變換
在第三章“圖層幾何學(xué)”中，我們使用了UIView的transform屬性旋轉(zhuǎn)了鐘的指針玉组，但并沒有解釋背后運(yùn)作的原理谎柄，實(shí)際上UIView的transform屬性是一個(gè)CGAffineTransform類型，用于在二維空間做旋轉(zhuǎn)惯雳，縮放和平移谷誓。CGAffineTransform是一個(gè)可以和二維空間向量（例如CGPoint）做乘法的3X2的矩陣（見圖5.1）。
用CGPoint的每一列和CGAffineTransform矩陣的每一行對應(yīng)元素相乘再求和吨凑，就形成了一個(gè)新的CGPoint類型的結(jié)果。要解釋一下圖中顯示的灰色元素，為了能讓矩陣做乘法鸵钝，左邊矩陣的列數(shù)一定要和右邊矩陣的行數(shù)個(gè)數(shù)相同糙臼，所以要給矩陣填充一些標(biāo)志值，使得既可以讓矩陣做乘法恩商，又不改變運(yùn)算結(jié)果袁勺，并且沒必要存儲這些添加的值踪少，因?yàn)樗鼈兊闹挡粫l(fā)生變化，但是要用來做運(yùn)算。
因此成玫，通常會用3×3（而不是2×3）的矩陣來做二維變換，你可能會見到3行2列格式的矩陣磕道，這是所謂的以列為主的格式膀哲，圖5.1所示的是以行為主的格式，只要能保持一致陌粹，用哪種格式都無所謂撒犀。
當(dāng)對圖層應(yīng)用變換矩陣，圖層矩形內(nèi)的每一個(gè)點(diǎn)都被相應(yīng)地做變換掏秩，從而形成一個(gè)新的四邊形的形狀或舞。CGAffineTransform中的“仿射”的意思是無論變換矩陣用什么值，圖層中平行的兩條線在變換之后任然保持平行蒙幻，CGAffineTransform可以做出任意符合上述標(biāo)注的變換映凳，圖5.2顯示了一些仿射的和非仿射的變換：
創(chuàng)建一個(gè)CGAffineTransform
對矩陣數(shù)學(xué)做一個(gè)全面的闡述就超出本書的討論范圍了，不過如果你對矩陣完全不熟悉的話邮破，矩陣變換可能會使你感到畏懼诈豌。幸運(yùn)的是，Core Graphics提供了一系列函數(shù)决乎，對完全沒有數(shù)學(xué)基礎(chǔ)的開發(fā)者也能夠簡單地做一些變換队询。如下幾個(gè)函數(shù)都創(chuàng)建了一個(gè)CGAffineTransform實(shí)例：
CGAffineTransformMakeRotation(CGFloat angle)
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
旋轉(zhuǎn)和縮放變換都可以很好解釋--分別旋轉(zhuǎn)或者縮放一個(gè)向量的值。平移變換是指每個(gè)點(diǎn)都移動(dòng)了向量指定的x或者y值--所以如果向量代表了一個(gè)點(diǎn)构诚，那它就平移了這個(gè)點(diǎn)的距離蚌斩。
我們用一個(gè)很簡單的項(xiàng)目來做個(gè)demo，把一個(gè)原始視圖旋轉(zhuǎn)45度角度（圖5.3）
UIView可以通過設(shè)置transform屬性做變換范嘱，但實(shí)際上它只是封裝了內(nèi)部圖層的變換送膳。
CALayer同樣也有一個(gè)transform屬性，但它的類型是CATransform3D丑蛤，而不是CGAffineTransform叠聋，本章后續(xù)將會詳細(xì)解釋。CALayer對應(yīng)于UIView的transform屬性叫做affineTransform受裹，清單5.1的例子就是使用affineTransform對圖層做了45度順時(shí)針旋轉(zhuǎn)碌补。
清單5.1 使用affineTransform對圖層旋轉(zhuǎn)45度
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the layer 45 degrees
CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4);
self.layerView.layer.affineTransform = transform;
}
@end
注意我們使用的旋轉(zhuǎn)常量是M_PI_4虏束，而不是你想象的45，因?yàn)閕OS的變換函數(shù)使用弧度而不是角度作為單位厦章≌蛟龋弧度用數(shù)學(xué)常量pi的倍數(shù)表示，一個(gè)pi代表180度袜啃，所以四分之一的pi就是45度汗侵。
C的數(shù)學(xué)函數(shù)庫（iOS會自動(dòng)引入）提供了pi的一些簡便的換算，M_PI_4于是就是pi的四分之一群发，如果對換算不太清楚的話晰韵，可以用如下的宏做換算：
#define RADIANS_TO_DEGREES(x) ((x)/M_PI*180.0)
#define DEGREES_TO_RADIANS(x) ((x)/180.0*M_PI)
混合變換
Core Graphics提供了一系列的函數(shù)可以在一個(gè)變換的基礎(chǔ)上做更深層次的變換，如果做一個(gè)既要縮放又要旋轉(zhuǎn)的變換熟妓，這就會非常有用了雪猪。例如下面幾個(gè)函數(shù)：
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
當(dāng)操縱一個(gè)變換的時(shí)候，初始生成一個(gè)什么都不做的變換很重要--也就是創(chuàng)建一個(gè)CGAffineTransform類型的空值滑蚯，矩陣論中稱作單位矩陣浪蹂，Core Graphics同樣也提供了一個(gè)方便的常量：
CGAffineTransformIdentity
最后，如果需要混合兩個(gè)已經(jīng)存在的變換矩陣告材，就可以使用如下方法坤次，在兩個(gè)變換的基礎(chǔ)上創(chuàng)建一個(gè)新的變換：
CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2);
我們來用這些函數(shù)組合一個(gè)更加復(fù)雜的變換，先縮小50%斥赋，再旋轉(zhuǎn)30度缰猴，最后向右移動(dòng)200個(gè)像素（清單5.2）。圖5.4顯示了圖層變換最后的結(jié)果疤剑。
清單5.2 使用若干方法創(chuàng)建一個(gè)復(fù)合變換
- (void)viewDidLoad
{
[super viewDidLoad];
CGAffineTransform transform = CGAffineTransformIdentity; //create a new transform
transform = CGAffineTransformScale(transform, 0.5, 0.5); //scale by 50%
transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0); //rotate by 30 degrees
transform = CGAffineTransformTranslate(transform, 200, 0); //translate by 200 points
//apply transform to layer
self.layerView.layer.affineTransform = transform;
}
圖5.4中有些需要注意的地方：圖片向右邊發(fā)生了平移滑绒，但并沒有指定距離那么遠(yuǎn)（200像素），另外它還有點(diǎn)向下發(fā)生了平移隘膘。原因在于當(dāng)你按順序做了變換疑故，上一個(gè)變換的結(jié)果將會影響之后的變換，所以200像素的向右平移同樣也被旋轉(zhuǎn)了30度弯菊，縮小了50%纵势，所以它實(shí)際上是斜向移動(dòng)了100像素。
這意味著變換的順序會影響最終的結(jié)果管钳，也就是說旋轉(zhuǎn)之后的平移和平移之后的旋轉(zhuǎn)結(jié)果可能不同钦铁。
剪切變換
Core Graphics為你提供了計(jì)算變換矩陣的一些方法，所以很少需要直接設(shè)置CGAffineTransform的值才漆。除非需要?jiǎng)?chuàng)建一個(gè)斜切的變換牛曹，Core Graphics并沒有提供直接的函數(shù)。
斜切變換是放射變換的第四種類型醇滥，較于平移黎比，旋轉(zhuǎn)和縮放并不常用（這也是Core Graphics沒有提供相應(yīng)函數(shù)的原因）超营，但有些時(shí)候也會很有用。我們用一張圖片可以很直接的說明效果（圖5.5）阅虫。也許用“傾斜”描述更加恰當(dāng)糟描，具體做變換的代碼見清單5.3。
清單5.3 實(shí)現(xiàn)一個(gè)斜切變換
@implementation ViewController
CGAffineTransform CGAffineTransformMakeShear(CGFloat x, CGFloat y)
{
CGAffineTransform transform = CGAffineTransformIdentity;
transform.c = -x;
transform.b = y;
return transform;
}
- (void)viewDidLoad
{
[super viewDidLoad];
//shear the layer at a 45-degree angle
self.layerView.layer.affineTransform = CGAffineTransformMakeShear(1, 0);
}
@end
3D變換
CG的前綴告訴我們书妻，CGAffineTransform類型屬于Core Graphics框架，Core Graphics實(shí)際上是一個(gè)嚴(yán)格意義上的2D繪圖API躬拢，并且CGAffineTransform僅僅對2D變換有效躲履。
在第三章中，我們提到了zPosition屬性聊闯，可以用來讓圖層靠近或者遠(yuǎn)離相機(jī)（用戶視角）工猜，transform屬性（CATransform3D類型）可以真正做到這點(diǎn)，即讓圖層在3D空間內(nèi)移動(dòng)或者旋轉(zhuǎn)菱蔬。
和CGAffineTransform類似篷帅，CATransform3D也是一個(gè)矩陣，但是和2x3的矩陣不同拴泌，CATransform3D是一個(gè)可以在3維空間內(nèi)做變換的4x4的矩陣（圖5.6）魏身。
和CGAffineTransform矩陣類似，Core Animation提供了一系列的方法用來創(chuàng)建和組合CATransform3D類型的矩陣蚪腐，和Core Graphics的函數(shù)類似箭昵，但是3D的平移和旋轉(zhuǎn)多處了一個(gè)z參數(shù)，并且旋轉(zhuǎn)函數(shù)除了angle之外多出了x,y,z三個(gè)參數(shù)回季，分別決定了每個(gè)坐標(biāo)軸方向上的旋轉(zhuǎn)：
CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)
CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)
你應(yīng)該對X軸和Y軸比較熟悉了家制，分別以右和下為正方向（回憶第三章，這是iOS上的標(biāo)準(zhǔn)結(jié)構(gòu)泡一，在Mac OS颤殴，Y軸朝上為正方向），Z軸和這兩個(gè)軸分別垂直鼻忠，指向視角外為正方向（圖5.7）涵但。
由圖所見，繞Z軸的旋轉(zhuǎn)等同于之前二維空間的仿射旋轉(zhuǎn)讨阻，但是繞X軸和Y軸的旋轉(zhuǎn)就突破了屏幕的二維空間芥永，并且在用戶視角看來發(fā)生了傾斜。
舉個(gè)例子：清單5.4的代碼使用了CATransform3DMakeRotation對視圖內(nèi)的圖層繞Y軸做了45度角的旋轉(zhuǎn)钝吮，我們可以把視圖向右傾斜埋涧，這樣會看得更清晰板辽。
結(jié)果見圖5.8，但并不像我們期待的那樣棘催。
清單5.4 繞Y軸旋轉(zhuǎn)圖層
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the layer 45 degrees along the Y axis
CATransform3D transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
self.layerView.layer.transform = transform;
}
@end
看起來圖層并沒有被旋轉(zhuǎn)劲弦，而是僅僅在水平方向上的一個(gè)壓縮，是哪里出了問題呢醇坝？
其實(shí)完全沒錯(cuò)邑跪，視圖看起來更窄實(shí)際上是因?yàn)槲覀冊谟靡粋€(gè)斜向的視角看它，而不是透視呼猪。
透視投影
在真實(shí)世界中画畅，當(dāng)物體遠(yuǎn)離我們的時(shí)候，由于視角的原因看起來會變小宋距，理論上說遠(yuǎn)離我們的視圖的邊要比靠近視角的邊跟短轴踱，但實(shí)際上并沒有發(fā)生，而我們當(dāng)前的視角是等距離的谚赎，也就是在3D變換中任然保持平行淫僻，和之前提到的仿射變換類似。
在等距投影中壶唤，遠(yuǎn)處的物體和近處的物體保持同樣的縮放比例雳灵，這種投影也有它自己的用處（例如建筑繪圖，顛倒视粮，和偽3D視頻）细办，但當(dāng)前我們并不需要。
為了做一些修正蕾殴，我們需要引入投影變換（又稱作z變換）來對除了旋轉(zhuǎn)之外的變換矩陣做一些修改笑撞，Core Animation并沒有給我們提供設(shè)置透視變換的函數(shù)，因此我們需要手動(dòng)修改矩陣值钓觉，幸運(yùn)的是茴肥，很簡單：
CATransform3D的透視效果通過一個(gè)矩陣中一個(gè)很簡單的元素來控制：m34。m34（圖5.9）用于按比例縮放X和Y的值來計(jì)算到底要離視角多遠(yuǎn)荡灾。
m34的默認(rèn)值是0，我們可以通過設(shè)置m34為-1.0 / d來應(yīng)用透視效果批幌，d代表了想象中視角相機(jī)和屏幕之間的距離础锐，以像素為單位，那應(yīng)該如何計(jì)算這個(gè)距離呢荧缘？實(shí)際上并不需要皆警，大概估算一個(gè)就好了。
因?yàn)橐暯窍鄼C(jī)實(shí)際上并不存在截粗，所以可以根據(jù)屏幕上的顯示效果自由決定它的放置的位置信姓。通常500-1000就已經(jīng)很好了鸵隧，但對于特定的圖層有時(shí)候更小或者更大的值會看起來更舒服，減少距離的值會增強(qiáng)透視效果意推，所以一個(gè)非常微小的值會讓它看起來更加失真豆瘫，然而一個(gè)非常大的值會讓它基本失去透視效果，對視圖應(yīng)用透視的代碼見清單5.5菊值，結(jié)果見圖5.10外驱。
清單5.5 對變換應(yīng)用透視效果
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create a new transform
CATransform3D transform = CATransform3DIdentity;
//apply perspective
transform.m34 = - 1.0 / 500.0;
//rotate by 45 degrees along the Y axis
transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);
//apply to layer
self.layerView.layer.transform = transform;
}
@end
滅點(diǎn)
當(dāng)在透視角度繪圖的時(shí)候，遠(yuǎn)離相機(jī)視角的物體將會變小變遠(yuǎn)腻窒，當(dāng)遠(yuǎn)離到一個(gè)極限距離略步，它們可能就縮成了一個(gè)點(diǎn)，于是所有的物體最后都匯聚消失在同一個(gè)點(diǎn)定页。
在現(xiàn)實(shí)中，這個(gè)點(diǎn)通常是視圖的中心（圖5.11）绽诚，于是為了在應(yīng)用中創(chuàng)建擬真效果的透視典徊，這個(gè)點(diǎn)應(yīng)該聚在屏幕中點(diǎn)，或者至少是包含所有3D對象的視圖中點(diǎn)恩够。
Core Animation定義了這個(gè)點(diǎn)位于變換圖層的anchorPoint（通常位于圖層中心卒落，但也有例外，見第三章）蜂桶。這就是說儡毕，當(dāng)圖層發(fā)生變換時(shí)，這個(gè)點(diǎn)永遠(yuǎn)位于圖層變換之前anchorPoint的位置扑媚。
當(dāng)改變一個(gè)圖層的position腰湾，你也改變了它的滅點(diǎn)，做3D變換的時(shí)候要時(shí)刻記住這一點(diǎn)疆股，當(dāng)你視圖通過調(diào)整m34來讓它更加有3D效果费坊，應(yīng)該首先把它放置于屏幕中央，然后通過平移來把它移動(dòng)到指定位置（而不是直接改變它的position）旬痹，這樣所有的3D圖層都共享一個(gè)滅點(diǎn)附井。
sublayerTransform屬性
如果有多個(gè)視圖或者圖層，每個(gè)都做3D變換两残，那就需要分別設(shè)置相同的m34值永毅，并且確保在變換之前都在屏幕中央共享同一個(gè)position，如果用一個(gè)函數(shù)封裝這些操作的確會更加方便人弓，但仍然有限制（例如沼死，你不能在Interface Builder中擺放視圖），這里有一個(gè)更好的方法票从。
CALayer有一個(gè)屬性叫做sublayerTransform漫雕。它也是CATransform3D類型滨嘱，但和對一個(gè)圖層的變換不同，它影響到所有的子圖層浸间。這意味著你可以一次性對包含這些圖層的容器做變換太雨，于是所有的子圖層都自動(dòng)繼承了這個(gè)變換方法。
相較而言魁蒜，通過在一個(gè)地方設(shè)置透視變換會很方便囊扳，同時(shí)它會帶來另一個(gè)顯著的優(yōu)勢：滅點(diǎn)被設(shè)置在容器圖層的中點(diǎn)，從而不需要再對子圖層分別設(shè)置了兜看。這意味著你可以隨意使用position和frame來放置子圖層锥咸，而不需要把它們放置在屏幕中點(diǎn)，然后為了保證統(tǒng)一的滅點(diǎn)用變換來做平移细移。
我們來用一個(gè)demo舉例說明搏予。這里用Interface Builder并排放置兩個(gè)視圖（圖5.12），然后通過設(shè)置它們?nèi)萜饕晥D的透視變換弧轧，我們可以保證它們有相同的透視和滅點(diǎn)雪侥，代碼見清單5.6，結(jié)果見圖5.13精绎。
清單5.6 應(yīng)用sublayerTransform
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, weak) IBOutlet UIView *layerView1;
@property (nonatomic, weak) IBOutlet UIView *layerView2;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//apply perspective transform to container
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = - 1.0 / 500.0;
self.containerView.layer.sublayerTransform = perspective;
//rotate layerView1 by 45 degrees along the Y axis
CATransform3D transform1 = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
self.layerView1.layer.transform = transform1;
//rotate layerView2 by 45 degrees along the Y axis
CATransform3D transform2 = CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);
self.layerView2.layer.transform = transform2;
}
背面
我們既然可以在3D場景下旋轉(zhuǎn)圖層速缨，那么也可以從背面去觀察它。如果我們在清單5.4中把角度修改為M_PI（180度）而不是當(dāng)前的M_PI_4（45度）代乃，那么將會把圖層完全旋轉(zhuǎn)一個(gè)半圈旬牲，于是完全背對了相機(jī)視角。
那么從背部看圖層是什么樣的呢搁吓，見圖5.14
如你所見，圖層是雙面繪制的堕仔，反面顯示的是正面的一個(gè)鏡像圖片员咽。
但這并不是一個(gè)很好的特性，因?yàn)槿绻麍D層包含文本或者其他控件贮预，那用戶看到這些內(nèi)容的鏡像圖片當(dāng)然會感到困惑贝室。另外也有可能造成資源的浪費(fèi)：想象用這些圖層形成一個(gè)不透明的固態(tài)立方體，既然永遠(yuǎn)都看不見這些圖層的背面仿吞，那為什么浪費(fèi)GPU來繪制它們呢滑频？
CALayer有一個(gè)叫做doubleSided的屬性來控制圖層的背面是否要被繪制。這是一個(gè)BOOL類型唤冈，默認(rèn)為YES峡迷，如果設(shè)置為NO，那么當(dāng)圖層正面從相機(jī)視角消失的時(shí)候，它將不會被繪制绘搞。
扁平化圖層
如果對包含已經(jīng)做過變換的圖層的圖層做反方向的變換將會發(fā)什么什么呢彤避？是不是有點(diǎn)困惑？見圖5.15
注意做了-45度旋轉(zhuǎn)的內(nèi)部圖層是怎樣抵消旋轉(zhuǎn)45度的圖層夯辖，從而恢復(fù)正常狀態(tài)的琉预。
如果內(nèi)部圖層相對外部圖層做了相反的變換（這里是繞Z軸的旋轉(zhuǎn)），那么按照邏輯這兩個(gè)變換將被相互抵消蒿褂。
驗(yàn)證一下圆米，相應(yīng)代碼見清單5.7，結(jié)果見5.16
清單5.7 繞Z軸做相反的旋轉(zhuǎn)變換
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *outerView;
@property (nonatomic, weak) IBOutlet UIView *innerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the outer layer 45 degrees
CATransform3D outer = CATransform3DMakeRotation(M_PI_4, 0, 0, 1);
self.outerView.layer.transform = outer;
//rotate the inner layer -45 degrees
CATransform3D inner = CATransform3DMakeRotation(-M_PI_4, 0, 0, 1);
self.innerView.layer.transform = inner;
}
@end
運(yùn)行結(jié)果和我們預(yù)期的一致∽乃ǎ現(xiàn)在在3D情況下再試一次娄帖。修改代碼，讓內(nèi)外兩個(gè)視圖繞Y軸旋轉(zhuǎn)而不是Z軸昙楚，再加上透視效果近速，以便我們觀察。注意不能用sublayerTransform屬性堪旧，因?yàn)閮?nèi)部的圖層并不直接是容器圖層的子圖層数焊，所以這里分別對圖層設(shè)置透視變換（清單5.8）。
清單5.8 繞Y軸相反的旋轉(zhuǎn)變換
- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the outer layer 45 degrees
CATransform3D outer = CATransform3DIdentity;
outer.m34 = -1.0 / 500.0;
outer = CATransform3DRotate(outer, M_PI_4, 0, 1, 0);
self.outerView.layer.transform = outer;
//rotate the inner layer -45 degrees
CATransform3D inner = CATransform3DIdentity;
inner.m34 = -1.0 / 500.0;
inner = CATransform3DRotate(inner, -M_PI_4, 0, 1, 0);
self.innerView.layer.transform = inner;
}
預(yù)期的效果應(yīng)該如圖5.17所示崎场。
但其實(shí)這并不是我們所看到的，相反遂蛀，我們看到的結(jié)果如圖5.18所示谭跨。發(fā)什么了什么呢？內(nèi)部的圖層仍然向左側(cè)旋轉(zhuǎn)李滴，并且發(fā)生了扭曲螃宙，但按道理說它應(yīng)該保持正面朝上，并且顯示正常的方塊所坯。
這是由于盡管Core Animation圖層存在于3D空間之內(nèi)谆扎，但它們并不都存在同一個(gè)3D空間。每個(gè)圖層的3D場景其實(shí)是扁平化的芹助，當(dāng)你從正面觀察一個(gè)圖層堂湖，看到的實(shí)際上由子圖層創(chuàng)建的想象出來的3D場景，但當(dāng)你傾斜這個(gè)圖層状土，你會發(fā)現(xiàn)實(shí)際上這個(gè)3D場景僅僅是被繪制在圖層的表面无蜂。
類似的，當(dāng)你在玩一個(gè)3D游戲蒙谓，實(shí)際上僅僅是把屏幕做了一次傾斜斥季，或許在游戲中可以看見有一面墻在你面前，但是傾斜屏幕并不能夠看見墻里面的東西。所有場景里面繪制的東西并不會隨著你觀察它的角度改變而發(fā)生變化酣倾；圖層也是同樣的道理舵揭。
這使得用Core Animation創(chuàng)建非常復(fù)雜的3D場景變得十分困難。你不能夠使用圖層樹去創(chuàng)建一個(gè)3D結(jié)構(gòu)的層級關(guān)系--在相同場景下的任何3D表面必須和同樣的圖層保持一致躁锡，這是因?yàn)槊總€(gè)的父視圖都把它的子視圖扁平化了午绳。
至少當(dāng)你用正常的CALayer的時(shí)候是這樣，CALayer有一個(gè)叫做CATransformLayer的子類來解決這個(gè)問題稚铣。具體在第六章“特殊的圖層”中將會具體討論箱叁。
固體對象
現(xiàn)在你懂得了在3D空間的一些圖層布局的基礎(chǔ)，我們來試著創(chuàng)建一個(gè)固態(tài)的3D對象（實(shí)際上是一個(gè)技術(shù)上所謂的空洞對象惕医，但它以固態(tài)呈現(xiàn)）耕漱。我們用六個(gè)獨(dú)立的視圖來構(gòu)建一個(gè)立方體的各個(gè)面。
在這個(gè)例子中抬伺，我們用.xib來構(gòu)建立方體的面（圖5.19）螟够，我們當(dāng)然可以用代碼來寫。
記住這些面僅僅是包含視圖和控件的普通的用戶界面元素峡钓，它們完全是我們界面交互的部分妓笙，并且當(dāng)把它折成一個(gè)立方體之后也不會改變這個(gè)性質(zhì)。
這些面視圖并沒有放置在主視圖當(dāng)中能岩，而是松散地排列在根nib文件里面寞宫。我們并不關(guān)心在這個(gè)容器中如何擺放它們的位置，因?yàn)楹罄m(xù)將會用圖層的transform對它們進(jìn)行重新布局拉鹃，并且用Interface Builder在容器視圖之外擺放他們可以讓我們?nèi)菀卓辞宄鼈兊膬?nèi)容辈赋，如果把它們一個(gè)疊著一個(gè)都塞進(jìn)主視圖，將會變得很難看膏燕。
我們把一個(gè)有顏色的UILabel放置在視圖內(nèi)部钥屈，是為了清楚的辨別它們之間的關(guān)系，并且UIButton被放置在第三個(gè)面視圖里面坝辫，后面會做簡單的解釋篷就。
具體把視圖組織成立方體的代碼見清單5.9，結(jié)果見圖5.20
清單5.9 創(chuàng)建一個(gè)立方體
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *faces;
@end
@implementation ViewController
- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform
{
//get the face view and add it to the container
UIView *face = self.faces[index];
[self.containerView addSubview:face];
//center the face view within the container
CGSize containerSize = self.containerView.bounds.size;
face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);
// apply the transform
face.layer.transform = transform;
}
- (void)viewDidLoad
{
[super viewDidLoad];
//set up the container sublayer transform
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1.0 / 500.0;
self.containerView.layer.sublayerTransform = perspective;
//add cube face 1
CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);
[self addFace:0 withTransform:transform];
//add cube face 2
transform = CATransform3DMakeTranslation(100, 0, 0);
transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
[self addFace:1 withTransform:transform];
//add cube face 3
transform = CATransform3DMakeTranslation(0, -100, 0);
transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
[self addFace:2 withTransform:transform];
//add cube face 4
transform = CATransform3DMakeTranslation(0, 100, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
[self addFace:3 withTransform:transform];
//add cube face 5
transform = CATransform3DMakeTranslation(-100, 0, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
[self addFace:4 withTransform:transform];
//add cube face 6
transform = CATransform3DMakeTranslation(0, 0, -100);
transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);
[self addFace:5 withTransform:transform];
}
@end
從這個(gè)角度看立方體并不是很明顯近忙；看起來只是一個(gè)方塊竭业，為了更好地欣賞它，我們將更換一個(gè)不同的視角及舍。
旋轉(zhuǎn)這個(gè)立方體將會顯得很笨重永品，因?yàn)槲覀円獑为?dú)對每個(gè)面做旋轉(zhuǎn)。另一個(gè)簡單的方案是通過調(diào)整容器視圖的sublayerTransform去旋轉(zhuǎn)照相機(jī)击纬。
添加如下幾行去旋轉(zhuǎn)containerView圖層的perspective變換矩陣：
perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);
perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
這就對相機(jī)（或者相對相機(jī)的整個(gè)場景鼎姐，你也可以這么認(rèn)為）繞Y軸旋轉(zhuǎn)45度，并且繞X軸旋轉(zhuǎn)45度。現(xiàn)在從另一個(gè)角度去觀察立方體炕桨，就能看出它的真實(shí)面貌（圖5.21）饭尝。
光亮和陰影
現(xiàn)在它看起來更像是一個(gè)立方體沒錯(cuò)了，但是對每個(gè)面之間的連接還是很難分辨献宫。Core Animation可以用3D顯示圖層钥平，但是它對光線并沒有概念。如果想讓立方體看起來更加真實(shí)姊途，需要自己做一個(gè)陰影效果涉瘾。你可以通過改變每個(gè)面的背景顏色或者直接用帶光亮效果的圖片來調(diào)整。
如果需要動(dòng)態(tài)地創(chuàng)建光線效果捷兰，你可以根據(jù)每個(gè)視圖的方向應(yīng)用不同的alpha值做出半透明的陰影圖層立叛，但為了計(jì)算陰影圖層的不透明度，你需要得到每個(gè)面的正太向量（垂直于表面的向量）贡茅，然后根據(jù)一個(gè)想象的光源計(jì)算出兩個(gè)向量叉乘結(jié)果秘蛇。叉乘代表了光源和圖層之間的角度，從而決定了它有多大程度上的光亮顶考。
清單5.10實(shí)現(xiàn)了這樣一個(gè)結(jié)果赁还，我們用GLKit框架來做向量的計(jì)算（你需要引入GLKit庫來運(yùn)行代碼），每個(gè)面的CATransform3D都被轉(zhuǎn)換成GLKMatrix4驹沿，然后通過GLKMatrix4GetMatrix3函數(shù)得出一個(gè)3×3的旋轉(zhuǎn)矩陣艘策。這個(gè)旋轉(zhuǎn)矩陣指定了圖層的方向，然后可以用它來得到正太向量的值渊季。
結(jié)果如圖5.22所示朋蔫，試著調(diào)整LIGHT_DIRECTION和AMBIENT_LIGHT的值來切換光線效果
清單5.10 對立方體的表面應(yīng)用動(dòng)態(tài)的光線效果
#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
#import <GLKit/GLKit.h>
#define LIGHT_DIRECTION 0, 1, -0.5
#define AMBIENT_LIGHT 0.5
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, strong) IBOutletCollection(UIView) NSArray *faces;
@end
@implementation ViewController
- (void)applyLightingToFace:(CALayer *)face
{
//add lighting layer
CALayer *layer = [CALayer layer];
layer.frame = face.bounds;
[face addSublayer:layer];
//convert the face transform to matrix
//(GLKMatrix4 has the same structure as CATransform3D)
//譯者注：GLKMatrix4和CATransform3D內(nèi)存結(jié)構(gòu)一致，但坐標(biāo)類型有長度區(qū)別梭域，所以理論上應(yīng)該做一次float到CGFloat的轉(zhuǎn)換，感謝[@zihuyishi](https://github.com/zihuyishi)同學(xué)~
CATransform3D transform = face.transform;
GLKMatrix4 matrix4 = *(GLKMatrix4 *)&transform;
GLKMatrix3 matrix3 = GLKMatrix4GetMatrix3(matrix4);
//get face normal
GLKVector3 normal = GLKVector3Make(0, 0, 1);
normal = GLKMatrix3MultiplyVector3(matrix3, normal);
normal = GLKVector3Normalize(normal);
//get dot product with light direction
GLKVector3 light = GLKVector3Normalize(GLKVector3Make(LIGHT_DIRECTION));
float dotProduct = GLKVector3DotProduct(light, normal);
//set lighting layer opacity
CGFloat shadow = 1 + dotProduct - AMBIENT_LIGHT;
UIColor *color = [UIColor colorWithWhite:0 alpha:shadow];
layer.backgroundColor = color.CGColor;
}
- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform
{
//get the face view and add it to the container
UIView *face = self.faces[index];
[self.containerView addSubview:face];
//center the face view within the container
CGSize containerSize = self.containerView.bounds.size;
face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);
// apply the transform
face.layer.transform = transform;
//apply lighting
[self applyLightingToFace:face.layer];
}
- (void)viewDidLoad
{
[super viewDidLoad];
//set up the container sublayer transform
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1.0 / 500.0;
perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);
perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
self.containerView.layer.sublayerTransform = perspective;
//add cube face 1
CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);
[self addFace:0 withTransform:transform];
//add cube face 2
transform = CATransform3DMakeTranslation(100, 0, 0);
transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
[self addFace:1 withTransform:transform];
//add cube face 3
transform = CATransform3DMakeTranslation(0, -100, 0);
transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
[self addFace:2 withTransform:transform];
//add cube face 4
transform = CATransform3DMakeTranslation(0, 100, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
[self addFace:3 withTransform:transform];
//add cube face 5
transform = CATransform3DMakeTranslation(-100, 0, 0);
transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
[self addFace:4 withTransform:transform];
//add cube face 6
transform = CATransform3DMakeTranslation(0, 0, -100);
transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);
[self addFace:5 withTransform:transform];
}
@end
點(diǎn)擊事件
你應(yīng)該能注意到現(xiàn)在可以在第三個(gè)表面的頂部看見按鈕了搅轿，點(diǎn)擊它病涨，什么都沒發(fā)生，為什么呢璧坟？
這并不是因?yàn)閕OS在3D場景下正確地處理響應(yīng)事件既穆，實(shí)際上是可以做到的。問題在于視圖順序雀鹃。在第三章中我們簡要提到過幻工，點(diǎn)擊事件的處理由視圖在父視圖中的順序決定的，并不是3D空間中的Z軸順序黎茎。當(dāng)給立方體添加視圖的時(shí)候囊颅，我們實(shí)際上是按照一個(gè)順序添加，所以按照視圖/圖層順序來說，4踢代，5盲憎，6在3的前面。
即使我們看不見4胳挎，5饼疙，6的表面（因?yàn)楸?，2慕爬，3遮住了）窑眯，iOS在事件響應(yīng)上仍然保持之前的順序。當(dāng)試圖點(diǎn)擊表面3上的按鈕医窿，表面4磅甩，5，6截?cái)嗔它c(diǎn)擊事件（取決于點(diǎn)擊的位置）留搔，這就和普通的2D布局在按鈕上覆蓋物體一樣更胖。
你也許認(rèn)為把doubleSided設(shè)置成NO可以解決這個(gè)問題，因?yàn)樗辉黉秩疽晥D后面的內(nèi)容隔显，但實(shí)際上并不起作用却妨。因?yàn)楸硨ο鄼C(jī)而隱藏的視圖仍然會響應(yīng)點(diǎn)擊事件（這和通過設(shè)置hidden屬性或者設(shè)置alpha為0而隱藏的視圖不同，那兩種方式將不會響應(yīng)事件）括眠。所以即使禁止了雙面渲染仍然不能解決這個(gè)問題（雖然由于性能問題彪标，還是需要把它設(shè)置成NO）。
這里有幾種正確的方案：把除了表面3的其他視圖userInteractionEnabled屬性都設(shè)置成NO來禁止事件傳遞掷豺±萄蹋或者簡單通過代碼把視圖3覆蓋在視圖6上。無論怎樣都可以點(diǎn)擊按鈕了（圖5.23）当船。
背景視圖不再阻礙按鈕题画，我們可以點(diǎn)擊它了
總結(jié)
這一章涉及了一些2D和3D的變換。你學(xué)習(xí)了一些矩陣計(jì)算的基礎(chǔ)德频，以及如何用Core Animation創(chuàng)建3D場景苍息。你看到了圖層背后到底是如何呈現(xiàn)的，并且知道了不能把扁平的圖片做成真實(shí)的立體效果壹置，最后我們用demo說明了觸摸事件的處理竞思，視圖中圖層添加的層級順序會比屏幕上顯示的順序更有意義。
