iOS-Core Animation: 變換

仿射變換

用 CGPoint 的每一列和 CGAffineTransform 矩陣的每一行對應元素相乘再求和，就形成了一個新的 CGPoint 類型的結果。要解釋一下圖中顯示的灰色元素，爲了能讓矩陣做乘法，左邊矩陣的列數一定要和右邊矩陣的行數個數相同，所以要給矩陣填充一些標誌值，使得既可以讓矩陣做乘法，又不改變運算結果，並且沒必要存儲這些添加的值，因爲它們的值不會發生變化，但是要用來做運算。

UIView 的 transform 屬性是一個 CGAffineTransform 類型，用於在二維空間做旋轉，縮放和平移。 CGAffineTransform 是一個可以和二維空間向量（例如的3X2的矩陣（見圖5.1）。

CALayer 同樣也有一個不是 transform CGAffineTransform 屬性，但它的類型是 CATransform3D ，而，本章後續將會詳細解釋。 CALayer 對應於 UIView 的 transform 屬性叫做 affineTransform

注意我們使用的旋轉常量是 M_PI_4 ，而不是你想象的45，因爲iOS的變換函數使用弧度而不是角度作爲單位。弧度用數學常量pi的倍數表示，一個pi代表180度，所以四分之一的pi就是45度

混合變換

Core Graphics提供了一系列的函數可以在一個變換的基礎上做更深層次的變換，

如果做一個既要縮放又要旋轉的變換，這就會非常有用了。例如下面幾個函數：

CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx,CGFloat sy)
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat

當操縱一個變換的時候，初始生成一個什麼都不做的變換很重要--也就是創建一個 CGAffineTransform 類型的空值，矩陣論中稱作單位矩陣，Core Graphics同樣也提供了一個方便的常量：CGAffineTransformIdentity

最後，如果需要混合兩個已經存在的變換矩陣，就可以使用如下方法，在兩個變換的基礎上創建一個新的變換：CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2.....

舉個🌰：
我們來用這些函數組合一個更加複雜的變換，先縮小50%，再旋轉30度，最後向右移動200個像素（清單5.2）。圖5.4顯示了圖層變換最後的結果。

[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;

中有些需要注意的地方：圖片向右邊發生了平移，但並沒有指定距離那麼遠（200像素），另外它還有點向下發生了平移。原因在於當你按順序做了變換，上一個變換的結果將會影響之後的變換，所以200像素的向右平移同樣也被旋轉了30 度，縮小了50%，所以它實際上是斜向移動了100像素。

這意味着變換的順序會影響最終的結果，也就是說旋轉之後的平移和平移之後的旋轉結果可能不同。

3D變換

CG的前綴告訴我們，CGAffineTransform類型屬於CoreGraphics框架，CoreGraphics實際上是一個嚴格意義上的2D繪圖API，並且 CGAffineTransform 僅僅對2D變換有效。

transform 屬性（CATransform3D類型）可以真正做到這點，即讓圖層在3D空間內移動或者旋轉

CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)

CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

X，Y，Z軸，以及圍繞它們旋轉的方向:

xy軸是垂直於手機屏幕的，

繞Z軸的旋轉等同於之前二維空間的仿射旋轉，但是繞X軸和Y軸的旋轉就突破了屏幕的二維空間，並且在用戶視角看來發生了傾斜。
，此時並未真正實現3D的展示效果，也是由於此所以有了透視

透視投影

在真實世界中，當物體遠離我們的時候，由於視角的原因看起來會變小，理論上說遠離我們的視圖的邊要比靠近視角的邊跟短，但實際上並沒有發生，而我們當前的視角是等距離的，也就是在3D變換中任然保持平行，和之前提到的仿射變換類似。

在等距投影中，遠處的物體和近處的物體保持同樣的縮放比例，這種投影也有它自己的用處（例如建築繪圖，顛倒，和僞3D視頻），但當前我們並不需要。

m34的默認值是0，我們可以通過設置m34爲-1.0/d來應用透視效果，d代表了想象中視角相機和屏幕之間的距離，以像素爲單位，那應該如何計算這個距離呢？實際上並不需要，大概估算一個就好了。

因爲視角相機實際上並不存在，所以可以根據屏幕上的顯示效果自由決定它的防止的位置。通常500-1000就已經很好了，但對於特定的圖層有時候更小後者更大的值會看起來更舒服，減少距離的值會增強透視效果，所以一個非常微小的值會讓它看起來更加失真，然而一個非常大的值會讓它基本失去透視效果，對視圖應用透視的

[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;

滅點

當在透視角度繪圖的時候，遠離相機視角的物體將會變小變遠，當遠離到一個極限距離，它們可能就縮成了一個點，於是所有的物體最後都匯聚消失在同一個點

在現實中，這個點通常是視圖的中心（圖5.11），於是爲了在應用中創建擬真效果的透視，這個點應該聚在屏幕中點，或者至少是包含所有3D對象的視圖中點。

這就是說，當圖層發生變換時，這個點永遠位於圖層變換之前 anchorPoint 的位置。

當改變一個圖層的position，你也改變了它的滅點，做3D變換的時候要時刻記住這一點，當你視圖通過調整m34來讓它更加有3D效果，應該首先把它放置於屏幕中央，然後通過平移來把它移動到指定位置（而不是直接改變它的position），這樣所有的3D圖層都共享一個滅點。

sublayerTransform

如果有多個視圖或者圖層，每個都做3D變換，那就需要分別設置相同的m34值，並且確保在變換之前都在屏幕中央共享同一個 position ，如果用一個函數封裝這些操作的確會更加方便，但仍然有限制（例如，你不能在Interface Builder中擺放視圖），這裏有一個更好的方法。

CALayer有一個屬性叫做sublayerTransform它也是CATransform3D類
型，但和對一個圖層的變換不同，它影響到所有的子圖層。這意味着你可以一次性對包含這些圖層的容器做變換，於是所有的子圖層都自動繼承了這個變換方法。

滅點被設置在容器圖層的中點，從而不需要再對子圖層分別設置了。這意味着你可以隨意使用 position 和 frame 來放置子圖層，而不需要把它們放置在屏幕中點，然後爲了保證統一的滅點用變換來做平移。

[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;

背面

如你所見，圖層是雙面繪製的，反面顯示的是正面的一個鏡像圖片。

但這並不是一個很好的特性，因爲如果圖層包含文本或者其他控件，那用戶看到這些內容的鏡像圖片當然會感到困惑。另外也有可能造成資源的浪費：想象用這些圖層形成一個不透明的固態立方體，既然永遠都看不見這些圖層的背面，那爲什麼浪費GPU來繪製它們呢？

CALayer有一個叫做doubleSided的屬性來控制圖層的背面是否要被繪製。這 BOOL 類型，默認爲YES，如果設置爲NO，那麼當圖層正面從相機視角是一個消失的時候，它將不會被繪製。

扁平化圖層

繞Z軸做相反的旋轉變換:

[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;

繞Y軸相反的旋轉變換:

[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;

但其實這並不是我們所看到的，相反，我們看到的結果如圖5.18所示。發什麼了什麼呢？內部的圖層仍然向左側旋轉，並且發生了扭曲，但按道理說它應該保持正面朝上，並且顯示正常的方塊。

這是由於儘管CoreAnimation圖層存在於3D空間之內，但它們並不都存在同一個 3D空間。每個圖層的3D場景其實是扁平化的，當你從正面觀察一個圖層，看到的實際上由子圖層創建的想象出來的3D場景，但當你傾斜這個圖層，你會發現實際上這個3D場景僅僅是被繪製在圖層的表面。(還是由於Z軸的變換其實是有xy共同作用代替的，沒有真實的Z)

類似的，當你在玩一個3D遊戲，實際上僅僅是把屏幕做了一次傾斜，或許在遊戲中可以看見有一面牆在你面前，但是傾斜屏幕並不能夠看見牆裏面的東西。所有場景裏面繪製的東西並不會隨着你觀察它的角度改變而發生變化；圖層也是同樣的道理。

這使得用Core Animation創建非常複雜的3D場景變得十分困難。你不能夠使用圖層樹去創建一個3D結構的層級關係--在相同場景下的任何3D表面必須和同樣的圖層保持一致，
這是因爲每個的父視圖都把它的子視圖扁平化了。
至少當你用正常的CALayer的時候是這樣，

CALayer 有一個叫做CATransformLayer的子類來解決這個問題。具體在第六章“特殊的圖層”中將會具體討論

固體對象

- (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.heigh

// 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

添加如下幾行去旋轉containerView 圖層的

perspective變換矩陣：

perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);

perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);

光亮和陰影

Core Animation可以用3D顯示圖層，但是它對光線並沒有概念。如果想讓立方體看起來更加真實，需要自己做一個陰影效果。你可以通過改變每個面的背景顏色或者直接用帶光亮效果的圖片來調整。

如果需要動態地創建光線效果，你可以根據每個視圖的方向應用不同的alpha值做出半透明的陰影圖層，但爲了計算陰影圖層的不透明度，你需要得到每個面的正太向量（垂直於表面的向量），然後根據一個想象的光源計算出兩個向量叉乘結果。叉乘代表了光源和圖層之間的角度，從而決定了它有多大程度上的光亮。

我們用GLKit框架來做向量的計算（你需要引入 GLKit庫來運行代碼），每個面的 CATransform3D 都被轉換成 GLKMatrix4 ，然後通過 GLKMatrix4GetMatrix3 函數得出一個3×3的旋轉矩陣。這個旋轉矩陣指
定了圖層的方向，然後可以用它來得到正太向量的值

點擊事件

，點擊事件的處理由視圖在父視圖中的順序決定的，並不是3D空間中的Z軸順序。當給立方體添加視圖的時候，我們實際上是按照一個順序添加，所以按照視圖/圖層順序來說，4，5，6在3的前面。

即使我們看不見4，5，6的表面（因爲被1，2，3遮住了），iOS在事件響應上仍然保持之前的順序。當試圖點擊表面3上的按鈕，表面4，5，6截斷了點擊事件（取決於點擊的位置），這就和普通的2D佈局在按鈕上覆蓋物體一樣。

同一時間，只有一面可以點擊，其他view都不接受事件

這裏有幾種正確的方案：把除了表面3的其他視圖 userInteractionEnabled 屬性都設置成 NO 來禁止事件傳遞。或者簡單通過代碼把視圖3覆蓋在視圖6上。無論樣都可以點擊按鈕了（圖5.23）

總結

這一章涉及了一些2D和3D的變換。你學習了一些矩陣計算的基礎，以及如何用 Core Animation創建3D場景。你看到了圖層背後到底是如何呈現的，並且知道了不能把扁平的圖片做成真實的立體效果，最後我們用demo說明了觸摸事件的處理，視圖中圖層添加的層級順序會比屏幕上顯示的順序更有意義。

iOS-Core Animation: 變換

仿射變換

混合變換

3D變換

透視投影

滅點

sublayerTransform

背面

扁平化圖層

固體對象

光亮和陰影

點擊事件

總結

Win10 LTSC 2019 安裝後的一些步驟

推薦2款開源、美觀的WinForm UI控件庫

NET9 AspnetCore將整合OpenAPI的文檔生成功能而無需三方庫

在Linux下管理MySQL的大小寫敏感性

前端新手學習入門路徑推薦

面試應該怎麼問問題？

C04：恰如其分的架構設計敏捷的基石

C03：架構，面向人的設計，面向業務的建模

架構-W01-食堂就餐卡系統設計

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結