本書翻譯自：iOS Core Animation: Advanced Techniques
知識是人類進步的階梯,重在分享
翻譯褐鸥，喵~
譯者為：
(排名不分先后榜掌，感謝他倆的付出莹痢！)
小兵將ZsIsMe的gitbook搬運至簡書上哲嘲，方便大家查看。
如果在閱讀過程中發(fā)現(xiàn)有什么問題播揪，請到這里（本電子書在github上的地址）開issue晒旅，我會盡快改過來。
很不幸掷邦，沒人能告訴你母體是什么白胀，你只能自己體會 -- 駭客帝國
在第四章“可視效果”中，我們研究了一些增強圖層和它的內(nèi)容顯示效果的一些技術(shù)抚岗，在這一章中或杠，我們將要研究可以用來對圖層旋轉(zhuǎn)，擺放或者扭曲的CGAffineTransform宣蔚，以及可以將扁平物體轉(zhuǎn)換成三維空間對象的CATransform3D（而不是僅僅對圓角矩形添加下沉陰影）向抢。
5.1 仿射變換
在第三章“圖層幾何學(xué)”中，我們使用了UIView的transform屬性旋轉(zhuǎn)了鐘的指針胚委，但并沒有解釋背后運作的原理笋额，實際上UIView的transform屬性是一個CGAffineTransform類型，用于在二維空間做旋轉(zhuǎn)篷扩，縮放和平移兄猩。CGAffineTransform是一個可以和二維空間向量（例如CGPoint）做乘法的3X2的矩陣（見圖5.1）。
圖5.1 用矩陣表示的CGAffineTransform和CGPoint.jpeg
用CGPoint的每一列和CGAffineTransform矩陣的每一行對應(yīng)元素相乘再求和鉴未，就形成了一個新的CGPoint類型的結(jié)果枢冤。要解釋一下圖中顯示的灰色元素，為了能讓矩陣做乘法铜秆，左邊矩陣的列數(shù)一定要和右邊矩陣的行數(shù)個數(shù)相同淹真，所以要給矩陣填充一些標(biāo)志值，使得既可以讓矩陣做乘法连茧，又不改變運算結(jié)果，并且沒必要存儲這些添加的值啸驯，因為它們的值不會發(fā)生變化客扎，但是要用來做運算。
因此罚斗，通常會用3×3（而不是2×3）的矩陣來做二維變換徙鱼，你可能會見到3行2列格式的矩陣，這是所謂的以列為主的格式，圖5.1所示的是以行為主的格式袱吆，只要能保持一致厌衙，用哪種格式都無所謂。
當(dāng)對圖層應(yīng)用變換矩陣绞绒，圖層矩形內(nèi)的每一個點都被相應(yīng)地做變換婶希，從而形成一個新的四邊形的形狀。CGAffineTransform中的“仿射”的意思是無論變換矩陣用什么值蓬衡，圖層中平行的兩條線在變換之后任然保持平行饲趋，CGAffineTransform可以做出任意符合上述標(biāo)注的變換，圖5.2顯示了一些仿射的和非仿射的變換：
5.2.jpeg
創(chuàng)建一個CGAffineTransform
對矩陣數(shù)學(xué)做一個全面的闡述就超出本書的討論范圍了撤蟆，不過如果你對矩陣完全不熟悉的話，矩陣變換可能會使你感到畏懼堂污。幸運的是家肯，Core Graphics提供了一系列函數(shù)，對完全沒有數(shù)學(xué)基礎(chǔ)的開發(fā)者也能夠簡單地做一些變換盟猖。如下幾個函數(shù)都創(chuàng)建了一個CGAffineTransform實例：
CGAffineTransformMakeRotation(CGFloat angle)
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
旋轉(zhuǎn)和縮放變換都可以很好解釋--分別旋轉(zhuǎn)或者縮放一個向量的值讨衣。平移變換是指每個點都移動了向量指定的x或者y值--所以如果向量代表了一個點，那它就平移了這個點的距離式镐。
我們用一個很簡單的項目來做個demo反镇，把一個原始視圖旋轉(zhuǎn)45度角度（圖5.3）
圖5.3 使用仿射變換旋轉(zhuǎn)45度角之后的視圖.jpeg
UIView可以通過設(shè)置transform屬性做變換，但實際上它只是封裝了內(nèi)部圖層的變換娘汞。
CALayer同樣也有一個transform屬性歹茶，但它的類型是CATransform3D，而不是CGAffineTransform你弦，本章后續(xù)將會詳細解釋惊豺。CALayer對應(yīng)于UIView的transform屬性叫做affineTransform，清單5.1的例子就是使用affineTransform對圖層做了45度順時針旋轉(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，因為iOS的變換函數(shù)使用弧度而不是角度作為單位旷偿∨胨祝弧度用數(shù)學(xué)常量pi的倍數(shù)表示，一個pi代表180度萍程，所以四分之一的pi就是45度幢妄。
C的數(shù)學(xué)函數(shù)庫（iOS會自動引入）提供了pi的一些簡便的換算，M_PI_4于是就是pi的四分之一茫负，如果對換算不太清楚的話磁浇，可以用如下的宏做換算：
#define RADIANS_TO_DEGREES(x) ((x)/M_PI*180.0)
```
##混合變換
Core Graphics提供了一系列的函數(shù)可以在一個變換的基礎(chǔ)上做更深層次的變換，如果做一個既要縮放又要旋轉(zhuǎn)的變換朽褪，這就會非常有用了置吓。例如下面幾個函數(shù)：
```
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
```
當(dāng)操縱一個變換的時候无虚，初始生成一個什么都不做的變換很重要--也就是創(chuàng)建一個CGAffineTransform類型的空值，矩陣論中稱作單位矩陣衍锚，Core Graphics同樣也提供了一個方便的常量：
```
CGAffineTransformIdentity
```
最后友题，如果需要混合兩個已經(jīng)存在的變換矩陣，就可以使用如下方法戴质，在兩個變換的基礎(chǔ)上創(chuàng)建一個新的變換：
```
CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2);
```
我們來用這些函數(shù)組合一個更加復(fù)雜的變換度宦，先縮小50%，再旋轉(zhuǎn)30度告匠，最后向右移動200個像素（清單5.2）戈抄。圖5.4顯示了圖層變換最后的結(jié)果。
清單5.2 使用若干方法創(chuàng)建一個復(fù)合變換
```
- (void)viewDidLoad
{
[super viewDidLoad]; //create a new transform
CGAffineTransform transform = CGAffineTransformIdentity; //scale by 50%
transform = CGAffineTransformScale(transform, 0.5, 0.5); //rotate by 30 degrees
transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0); //translate by 200 points
transform = CGAffineTransformTranslate(transform, 200, 0);
//apply transform to layer
self.layerView.layer.affineTransform = transform;
}
```
圖5.4中有些需要注意的地方：圖片向右邊發(fā)生了平移后专，但并沒有指定距離那么遠（200像素）划鸽，另外它還有點向下發(fā)生了平移。原因在于當(dāng)你按順序做了變換戚哎，上一個變換的結(jié)果將會影響之后的變換裸诽，所以200像素的向右平移同樣也被旋轉(zhuǎn)了30度，縮小了50%型凳，所以它實際上是斜向移動了100像素丈冬。
這意味著變換的順序會影響最終的結(jié)果，也就是說旋轉(zhuǎn)之后的平移和平移之后的旋轉(zhuǎn)結(jié)果可能不同甘畅。
```
#define DEGREES_TO_RADIANS(x) ((x)/180.0*M_PI)
```
#5.2 3D變換
CG的前綴告訴我們埂蕊，CGAffineTransform類型屬于Core Graphics框架，Core Graphics實際上是一個嚴(yán)格意義上的2D繪圖API疏唾，并且CGAffineTransform僅僅對2D變換有效粒梦。
在第三章中，我們提到了zPosition屬性荸实，可以用來讓圖層靠近或者遠離相機（用戶視角）匀们，transform屬性（CATransform3D類型）可以真正做到這點，即讓圖層在3D空間內(nèi)移動或者旋轉(zhuǎn)准给。
和CGAffineTransform類似泄朴，CATransform3D也是一個矩陣，但是和2x3的矩陣不同露氮，CATransform3D是一個可以在3維空間內(nèi)做變換的4x4的矩陣（圖5.6）祖灰。
和CGAffineTransform矩陣類似，Core Animation提供了一系列的方法用來創(chuàng)建和組合CATransform3D類型的矩陣畔规，和Core Graphics的函數(shù)類似局扶，但是3D的平移和旋轉(zhuǎn)多處了一個z參數(shù)，并且旋轉(zhuǎn)函數(shù)除了angle之外多出了x,y,z三個參數(shù)，分別決定了每個坐標(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軸和這兩個軸分別垂直，指向視角外為正方向（圖5.7）模燥。
由圖所見么翰，繞Z軸的旋轉(zhuǎn)等同于之前二維空間的仿射旋轉(zhuǎn)，但是繞X軸和Y軸的旋轉(zhuǎn)就突破了屏幕的二維空間辽旋，并且在用戶視角看來發(fā)生了傾斜浩嫌。
舉個例子：清單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)，而是僅僅在水平方向上的一個壓縮怔匣，是哪里出了問題呢握联？
其實完全沒錯，視圖看起來更窄實際上是因為我們在用一個斜向的視角看它每瞒，而不是透視金闽。
##透視投影
在真實世界中，當(dāng)物體遠離我們的時候剿骨，由于視角的原因看起來會變小代芜，理論上說遠離我們的視圖的邊要比靠近視角的邊跟短，但實際上并沒有發(fā)生浓利，而我們當(dāng)前的視角是等距離的挤庇，也就是在3D變換中任然保持平行，和之前提到的仿射變換類似贷掖。
在等距投影中嫡秕，遠處的物體和近處的物體保持同樣的縮放比例，這種投影也有它自己的用處（例如建筑繪圖苹威，顛倒昆咽，和偽3D視頻），但當(dāng)前我們并不需要。
為了做一些修正掷酗，我們需要引入投影變換（又稱作z變換）來對除了旋轉(zhuǎn)之外的變換矩陣做一些修改调违，Core Animation并沒有給我們提供設(shè)置透視變換的函數(shù)，因此我們需要手動修改矩陣值汇在，幸運的是翰萨，很簡單：
CATransform3D的透視效果通過一個矩陣中一個很簡單的元素來控制：m34。m34（圖5.9）用于按比例縮放X和Y的值來計算到底要離視角多遠糕殉。
m34的默認(rèn)值是0，我們可以通過設(shè)置m34為-1.0 / d來應(yīng)用透視效果阿蝶，d代表了想象中視角相機和屏幕之間的距離雳锋，以像素為單位，那應(yīng)該如何計算這個距離呢羡洁？實際上并不需要玷过，大概估算一個就好了。
因為視角相機實際上并不存在筑煮，所以可以根據(jù)屏幕上的顯示效果自由決定它的防止的位置辛蚊。通常500-1000就已經(jīng)很好了，但對于特定的圖層有時候更小后者更大的值會看起來更舒服真仲，減少距離的值會增強透視效果袋马，所以一個非常微小的值會讓它看起來更加失真，然而一個非常大的值會讓它基本失去透視效果秸应，對視圖應(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
```
##滅點
當(dāng)在透視角度繪圖的時候软啼，遠離相機視角的物體將會變小變遠桑谍，當(dāng)遠離到一個極限距離，它們可能就縮成了一個點祸挪，于是所有的物體最后都匯聚消失在同一個點锣披。
在現(xiàn)實中，這個點通常是視圖的中心（圖5.11）贿条，于是為了在應(yīng)用中創(chuàng)建擬真效果的透視盈罐，這個點應(yīng)該聚在屏幕中點，或者至少是包含所有3D對象的視圖中點闪唆。
Core Animation定義了這個點位于變換圖層的anchorPoint（通常位于圖層中心盅粪，但也有例外，見第三章）悄蕾。這就是說票顾，當(dāng)圖層發(fā)生變換時础浮，這個點永遠位于圖層變換之前anchorPoint的位置。
當(dāng)改變一個圖層的position奠骄，你也改變了它的滅點豆同，做3D變換的時候要時刻記住這一點，當(dāng)你視圖通過調(diào)整m34來讓它更加有3D效果含鳞，應(yīng)該首先把它放置于屏幕中央影锈，然后通過平移來把它移動到指定位置（而不是直接改變它的position），這樣所有的3D圖層都共享一個滅點蝉绷。
##sublayerTransform屬性
如果有多個視圖或者圖層鸭廷，每個都做3D變換，那就需要分別設(shè)置相同的m34值熔吗，并且確保在變換之前都在屏幕中央共享同一個position辆床，如果用一個函數(shù)封裝這些操作的確會更加方便，但仍然有限制（例如桅狠，你不能在Interface Builder中擺放視圖）讼载，這里有一個更好的方法。
CALayer有一個屬性叫做sublayerTransform中跌。它也是CATransform3D類型咨堤，但和對一個圖層的變換不同，它影響到所有的子圖層漩符。這意味著你可以一次性對包含這些圖層的容器做變換一喘，于是所有的子圖層都自動繼承了這個變換方法。
相較而言陨仅，通過在一個地方設(shè)置透視變換會很方便津滞，同時它會帶來另一個顯著的優(yōu)勢：滅點被設(shè)置在容器圖層的中點铝侵，從而不需要再對子圖層分別設(shè)置了灼伤。這意味著你可以隨意使用position和frame來放置子圖層，而不需要把它們放置在屏幕中點咪鲜，然后為了保證統(tǒng)一的滅點用變換來做平移狐赡。
我們來用一個demo舉例說明。這里用Interface Builder并排放置兩個視圖（圖5.12）疟丙，然后通過設(shè)置它們?nèi)萜饕晥D的透視變換颖侄，我們可以保證它們有相同的透視和滅點，代碼見清單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)一個半圈又活，于是完全背對了相機視角。
那么從背部看圖層是什么樣的呢锰悼，見圖5.14
如你所見，圖層是雙面繪制的箕般，反面顯示的是正面的一個鏡像圖片耐薯。
但這并不是一個很好的特性，因為如果圖層包含文本或者其他控件丝里，那用戶看到這些內(nèi)容的鏡像圖片當(dāng)然會感到困惑曲初。另外也有可能造成資源的浪費：想象用這些圖層形成一個不透明的固態(tài)立方體，既然永遠都看不見這些圖層的背面丙者，那為什么浪費GPU來繪制它們呢复斥？
CALayer有一個叫做doubleSided的屬性來控制圖層的背面是否要被繪制械媒。這是一個BOOL類型目锭，默認(rèn)為YES，如果設(shè)置為NO纷捞，那么當(dāng)圖層正面從相機視角消失的時候痢虹，它將不會被繪制。
##扁平化圖層
如果對包含已經(jīng)做過變換的圖層的圖層做反方向的變換將會發(fā)什么什么呢主儡？是不是有點困惑奖唯？見圖5.15
注意做了-45度旋轉(zhuǎn)的內(nèi)部圖層是怎樣抵消旋轉(zhuǎn)45度的圖層，從而恢復(fù)正常狀態(tài)的糜值。
如果內(nèi)部圖層相對外部圖層做了相反的變換（這里是繞Z軸的旋轉(zhuǎ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
```
運行結(jié)果和我們預(yù)期的一致。現(xiàn)在在3D情況下再試一次骄瓣。修改代碼停巷，讓內(nèi)外兩個視圖繞Y軸旋轉(zhuǎn)而不是Z軸，再加上透視效果榕栏，以便我們觀察畔勤。注意不能用sublayerTransform屬性，因為內(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所示。
但其實這并不是我們所看到的缸榛，相反检访，我們看到的結(jié)果如圖5.18所示。發(fā)什么了什么呢仔掸？內(nèi)部的圖層仍然向左側(cè)旋轉(zhuǎn)脆贵，并且發(fā)生了扭曲，但按道理說它應(yīng)該保持正面朝上起暮，并且顯示正常的方塊卖氨。
這是由于盡管Core Animation圖層存在于3D空間之內(nèi)，但它們并不都存在同一個3D空間负懦。每個圖層的3D場景其實是扁平化的筒捺，當(dāng)你從正面觀察一個圖層，看到的實際上由子圖層創(chuàng)建的想象出來的3D場景纸厉，但當(dāng)你傾斜這個圖層系吭，你會發(fā)現(xiàn)實際上這個3D場景僅僅是被繪制在圖層的表面。
類似的颗品，當(dāng)你在玩一個3D游戲肯尺，實際上僅僅是把屏幕做了一次傾斜，或許在游戲中可以看見有一面墻在你面前躯枢，但是傾斜屏幕并不能夠看見墻里面的東西则吟。所有場景里面繪制的東西并不會隨著你觀察它的角度改變而發(fā)生變化；圖層也是同樣的道理锄蹂。
這使得用Core Animation創(chuàng)建非常復(fù)雜的3D場景變得十分困難氓仲。你不能夠使用圖層樹去創(chuàng)建一個3D結(jié)構(gòu)的層級關(guān)系--在相同場景下的任何3D表面必須和同樣的圖層保持一致，這是因為每個的父視圖都把它的子視圖扁平化了得糜。
至少當(dāng)你用正常的CALayer的時候是這樣敬扛，CALayer有一個叫做CATransformLayer的子類來解決這個問題。具體在第六章“特殊的圖層”中將會具體討論朝抖。
#5.3 固體對象
現(xiàn)在你懂得了在3D空間的一些圖層布局的基礎(chǔ)啥箭，我們來試著創(chuàng)建一個固態(tài)的3D對象（實際上是一個技術(shù)上所謂的空洞對象，但它以固態(tài)呈現(xiàn)）槽棍。我們用六個獨立的視圖來構(gòu)建一個立方體的各個面捉蚤。
在這個例子中抬驴，我們用Interface Builder來構(gòu)建立方體的面（圖5.19）炼七，我們當(dāng)然可以用代碼來寫，但是用Interface Builder的好處是可以方便的在每一個面上添加子視圖布持。記住這些面僅僅是包含視圖和控件的普通的用戶界面元素豌拙，它們完全是我們界面交互的部分，并且當(dāng)把它折成一個立方體之后也不會改變這個性質(zhì)题暖。
這些面視圖并沒有放置在主視圖當(dāng)中按傅，而是松散地排列在根nib文件里面捉超。我們并不關(guān)心在這個容器中如何擺放它們的位置，因為后續(xù)將會用圖層的transform對它們進行重新布局唯绍，并且用Interface Builder在容器視圖之外擺放他們可以讓我們?nèi)菀卓辞宄鼈兊膬?nèi)容拼岳，如果把它們一個疊著一個都塞進主視圖，將會變得很難看况芒。
我們把一個有顏色的UILabel放置在視圖內(nèi)部惜纸，是為了清楚的辨別它們之間的關(guān)系，并且UIButton被放置在第三個面視圖里面绝骚，后面會做簡單的解釋耐版。
具體把視圖組織成立方體的代碼見清單5.9，結(jié)果見圖5.20
清單5.9 創(chuàng)建一個立方體
```
@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
```
從這個角度看立方體并不是很明顯压汪；看起來只是一個方塊粪牲，為了更好地欣賞它，我們將更換一個不同的視角止剖。
旋轉(zhuǎn)這個立方體將會顯得很笨重腺阳，因為我們要單獨對每個面做旋轉(zhuǎn)。另一個簡單的方案是通過調(diào)整容器視圖的sublayerTransform去旋轉(zhuǎn)照相機穿香。
添加如下幾行去旋轉(zhuǎn)containerView圖層的perspective變換矩陣：
```
perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);
perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
```
這就對相機（或者相對相機的整個場景舌狗，你也可以這么認(rèn)為）繞Y軸旋轉(zhuǎn)45度，并且繞X軸旋轉(zhuǎn)45度∪铀現(xiàn)在從另一個角度去觀察立方體痛侍，就能看出它的真實面貌（圖5.21）。
##光亮和陰影
現(xiàn)在它看起來更像是一個立方體沒錯了魔市，但是對每個面之間的連接還是很難分辨主届。Core Animation可以用3D顯示圖層，但是它對光線并沒有概念待德。如果想讓立方體看起來更加真實君丁，需要自己做一個陰影效果。你可以通過改變每個面的背景顏色或者直接用帶光亮效果的圖片來調(diào)整将宪。
如果需要動態(tài)地創(chuàng)建光線效果绘闷，你可以根據(jù)每個視圖的方向應(yīng)用不同的alpha值做出半透明的陰影圖層，但為了計算陰影圖層的不透明度较坛，你需要得到每個面的正太向量（垂直于表面的向量）印蔗，然后根據(jù)一個想象的光源計算出兩個向量叉乘結(jié)果。叉乘代表了光源和圖層之間的角度丑勤，從而決定了它有多大程度上的光亮华嘹。
清單5.10實現(xiàn)了這樣一個結(jié)果，我們用GLKit框架來做向量的計算（你需要引入GLKit庫來運行代碼）法竞，每個面的CATransform3D都被轉(zhuǎn)換成GLKMatrix4耙厚，然后通過GLKMatrix4GetMatrix3函數(shù)得出一個3×3的旋轉(zhuǎn)矩陣强挫。這個旋轉(zhuǎn)矩陣指定了圖層的方向，然后可以用它來得到正太向量的值薛躬。
結(jié)果如圖5.22所示俯渤，試著調(diào)整LIGHT_DIRECTION和AMBIENT_LIGHT的值來切換光線效果
清單5.10 對立方體的表面應(yīng)用動態(tài)的光線效果
```
#import "ViewController.h"
#import
#import
#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
```
##點擊事件
你應(yīng)該能注意到現(xiàn)在可以在第三個表面的頂部看見按鈕了，點擊它诡曙，什么都沒發(fā)生臀叙，為什么呢？
這并不是因為iOS在3D場景下正確地處理響應(yīng)事件价卤，實際上是可以做到的劝萤。問題在于視圖順序。在第三章中我們簡要提到過慎璧，點擊事件的處理由視圖在父視圖中的順序決定的床嫌，并不是3D空間中的Z軸順序。當(dāng)給立方體添加視圖的時候胸私，我們實際上是按照一個順序添加厌处，所以按照視圖/圖層順序來說，4岁疼，5阔涉，6在3的前面。
即使我們看不見4捷绒，5瑰排，6的表面（因為被1，2暖侨，3遮住了）椭住，iOS在事件響應(yīng)上仍然保持之前的順序。當(dāng)試圖點擊表面3上的按鈕字逗，表面4京郑，5，6截斷了點擊事件（取決于點擊的位置）葫掉，這就和普通的2D布局在按鈕上覆蓋物體一樣些举。
你也許認(rèn)為把doubleSided設(shè)置成NO可以解決這個問題，因為它不再渲染視圖后面的內(nèi)容挖息，但實際上并不起作用金拒。因為背對相機而隱藏的視圖仍然會響應(yīng)點擊事件（這和通過設(shè)置hidden屬性或者設(shè)置alpha為0而隱藏的視圖不同兽肤，那兩種方式將不會響應(yīng)事件）套腹。所以即使禁止了雙面渲染仍然不能解決這個問題（雖然由于性能問題绪抛，還是需要把它設(shè)置成NO）。
這里有幾種正確的方案：把除了表面3的其他視圖userInteractionEnabled屬性都設(shè)置成NO來禁止事件傳遞电禀〈甭耄或者簡單通過代碼把視圖3覆蓋在視圖6上。無論怎樣都可以點擊按鈕了（圖5.23）尖飞。
----
##總結(jié)
這一章涉及了一些2D和3D的變換。你學(xué)習(xí)了一些矩陣計算的基礎(chǔ)政基，以及如何用Core Animation創(chuàng)建3D場景贞铣。你看到了圖層背后到底是如何呈現(xiàn)的，并且知道了不能把扁平的圖片做成真實的立體效果沮明，最后我們用demo說明了觸摸事件的處理辕坝，視圖中圖層添加的層級順序會比屏幕上顯示的順序更有意義。
第六章我們會研究一些Core Animation提供不同功能的具體的CALayer子類荐健。
[轉(zhuǎn)載 - ios核心動畫高級技巧（圖層樹）](http://www.reibang.com/p/4f101d7a7f50)
[轉(zhuǎn)載 - ios核心動畫高級技巧（寄宿圖）](http://www.reibang.com/p/3fe38a1377a4)
[轉(zhuǎn)載 - ios核心動畫高級技巧（圖層幾何學(xué)）](http://www.reibang.com/p/b8753bbe22e6)
[轉(zhuǎn)載 - ios核心動畫高級技巧（視覺效果）](http://www.reibang.com/p/0f8dda24468c)
[轉(zhuǎn)載 - ios核心動畫高級技巧（變換）](http://www.reibang.com/p/b52510c7ad36)
[轉(zhuǎn)載 - ios核心動畫高級技巧（專用圖層）](http://www.reibang.com/p/f5872eebebc1)
---
#*隨手點個喜歡吧~*
#*關(guān)注我*
#*QQ--iOS 交流群：107548668*