級別： ★★☆☆☆
標簽：「iOS」「Swift」「CATransform3D」「3D變換」
作者： 大成小棧
審校： QiShare團隊
之前分享過一篇介紹仿射變換的文章，仿射變換屬于平面變換，本文來介紹一下iOS中的3D變換 ——— CATransform3D。
1. 回顧一下二維變換
二維變換，也即仿射變換，CGAffineTransform結構體類型中有6個參數：
public struct CGAffineTransform {
public var a: CGFloat
public var b: CGFloat
public var c: CGFloat
public var d: CGFloat
public var tx: CGFloat
public var ty: CGFloat
public init()
public init(a: CGFloat, b: CGFloat, c: CGFloat, d: CGFloat, tx: CGFloat, ty: CGFloat)
}
增廣之后可得如下變換矩陣：
x' = ax + cy + tx
y' = bx + dy + ty
具體變換過程及使用，可以參考《Swift 中使用 CGAffineTransform》。
2. 三維變換CATransform3D
其中三維變換矩陣一般應用在視圖的 view.layer.transform 和 view.layer.sublayerTransform中。CATransform3D結構體類型中的參數為：
public struct CATransform3D {
public var m11: CGFloat
public var m12: CGFloat
public var m13: CGFloat
public var m14: CGFloat
public var m21: CGFloat
public var m22: CGFloat
public var m23: CGFloat
public var m24: CGFloat
public var m31: CGFloat
public var m32: CGFloat
public var m33: CGFloat
public var m34: CGFloat
public var m41: CGFloat
public var m42: CGFloat
public var m43: CGFloat
public var m44: CGFloat
public init()
public init(m11: CGFloat, m12: CGFloat, m13: CGFloat, m14: CGFloat, m21: CGFloat, m22: CGFloat, m23: CGFloat, m24: CGFloat, m31: CGFloat, m32: CGFloat, m33: CGFloat, m34: CGFloat, m41: CGFloat, m42: CGFloat, m43: CGFloat, m44: CGFloat)
}
這些參數依然對應一個變換矩陣，
上面參數對應矩陣的位置如下：
{m11, m12 , m13, m14
m21, m22, m23, m24
m31, m32, m33, m34
m41, m42, m43, m44 }
x' = m11x + m21y + m31z + m41
y' = m12x + m22y + m32z + m42
z' = m13x + m23y + m33z + m43
(m14、m24和m34為各軸透視變換參數，一般單獨設置，他們對m44的值產生影響，而m44對投影的圖形在對應軸*方向產生線性影響，其初始值為1)
從m11到m44定義的含義如下：
m11：x軸方向進行縮放
m12：和m21一起決定z軸的旋轉
m13:和m31一起決定y軸的旋轉
m14:
m21:和m12一起決定z軸的旋轉
m22:y軸方向進行縮放
m23:和m32一起決定x軸的旋轉
m24:
m31:和m13一起決定y軸的旋轉
m32:和m23一起決定x軸的旋轉
m33:z軸方向進行縮放
m34:透視效果m34= -1/D，D越小，透視效果越明顯，必須在有旋轉效果的前提下，才會看到透視效果
m41:x軸方向進行平移
m42:y軸方向進行平移
m43:z軸方向進行平移
m44:初始為1
則，原始矩陣為：
{1, 0 , 0, 0
0, 1, 0, 0
0, 0, 1, 0
0, 0, 0, 1 }
2.1 旋轉 rotate
- 繞Z軸
{ cos(θ) ，-sin(θ) ， 0 ，0
sin(θ) ， cos(θ) ， 0 ，0
0 ， 0 ， 1 ，0
0 ， 0 ， 0 ，1}
- 繞Y軸
{ cos(θ) ，0 ，sin(θ) ，0
0 ，1 ， 0 ，0
-sin(θ） ，0 ，cos(θ) ，0
0 ，0 ， 0 ，1}
- 繞X軸
{1 ， 0 ， 0 ，0
0 ，cos(θ) ，-sin(θ) ，0
0 ，sin(θ) ，cos(θ) ，0
0 ， 0 ， 0 ，1}
2.2 切變 shear
- 沿X軸
{ 1 ，k ，0 ，0
0 ，1 ，0 ，0
0 ，0 ，1 ，0
0 ，0 ，0 ，1}
- 沿Y軸
{ 1 ，0 ，0 ，0
k ，1 ，0 ，0
0 ，0 ，1 ，0
0 ，0 ，0 ，1}
2.3 鏡像
- 基于Y-X平面
{ 1 ，0 ，0 ，0
0 ，1 ，0 ，0
0 ，0 ，-1 ，0
0 ，0 ，0 ，1}
- 基于X-Z平面
{1 ，0 ，0 ，0
0 ，-1 ，0 ，0
0 ，0 ，1 ，0
0 ，0 ，0 ，1}
- 基于Z-Y平面
{ -1 ，0 ，0 ，0
0 ，1 ，0 ，0
0 ，0 ，1 ，0
0 ，0 ，0 ，1}
2.4 針對z軸的透視投影
m34 = -1/d
d值決定了觀察點的位置，d為正無窮大的時候，觀察點在無窮遠處，此時投影線垂直于投影平面，CATransform3D中m34的默認值為0，即觀察點在無窮遠處。m14,m24同理。
當d為正的時候，投影是人眼觀察現實世界的效果，即在投影平面上表現出近大遠小的效果，z越靠近原點則這種效果越明顯，越遠離原點則越來越不明顯，當z為正無窮大的時候，則失去了近大遠小的效果，此時投影線垂直于投影平面，也就是視點在無窮遠處，CATransform3D中m34的默認值為0，即視點在無窮遠處.
注意：齊次坐標到數學坐標的轉換通用的齊次坐標為 (a, b, c, h)，其轉換成數學坐標則為 (a/h, b/h, c/h)。
- 代數解釋
假設一個Layer anchorPoint為默認的 (0.5, 0.5 )，其三維空間中一個A點 (6, 0, 0)，m34 = -1/1000.0，則此點往z軸負方向移動10個單位之后，則在投影平面上看到的點的坐標是多少呢？
A點使用齊次坐標表示為 (6, 0, 0, 1)
QuartzCore框架為我們提供了函數來算出所需要的矩陣，
var transform3D: CATransform3D = CATransform3DIdentity
transform3D.m34 = -1.0 / 1000.0
transform = CATransform3DTranslate(transform, 0, 0, -10)
計算出來的矩陣為
{ 1, 0, 0, 0
0, 1, 0, 0
0, 0, 1, -0.001
0, 0, -10, 1.01}
其實上面的變換矩陣本質上是兩個矩陣相乘得到的 變換矩陣 * 投影矩陣 變換矩陣為
{1, 0, 0, 0
0, 1, 0, 0
0, 0, 1, 0
0, 0, -10, 1}
投影矩陣為
{1, 0, 0, 0
0, 1, 0, 0
0, 0, 1, -0.001
0, 0, 0, 1}
上面的兩個矩陣相乘則會得到最終的變換矩陣(如果忘記矩陣乘法的可以去看下線性代數復習下)，所以一個矩陣就可以完成變換和投影。
將A點坐標乘上最終的變換矩陣，則得到 {6, 0 , -10, 1.01}, 轉換成數學坐標點為 {6/1.01, 0, 10/1.01},則可以知道其在投影平面上的投影點為 {6/1.01, 0, 0} 也就是我們看到的變換后的點。其比之前較靠近原點。越往z軸負方向移動，則在投影平面上越靠近原點。
- 幾何解釋
將上面的例子使用幾何的方式來進行解釋分析，當我們沿著y軸的正方向向下看時候，可以得到如下的景象:
虛線為投影線，其和x軸的交點即為A點的投影點。 由相似三角形的定理我們很容易算出投影的點，
1000/(1000 + 10) = x/6,則x = 6*1000/1010 = 6/1.01
本文主要介紹3D變換的原理，具體應用請關注之后分享的文章。
推薦文章：
WebSocket 雙端實踐（iOS/ Golang）
今天我們來聊一聊WebSocket（iOS/Golang）
用 Swift 進行貝塞爾曲線繪制
Swift 5.1 (11) - 方法
Swift 5.1 (10) - 屬性
iOS App后臺保活
