级别： ★★☆☆☆
标签：「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后台保活
