一、前沿

1、三维坐标系：视角垂直与屏幕而言，x轴向右，y轴向下，z轴垂直屏幕向外，二维坐标系只有x轴和y轴
2、坐标系原点：ios默认以图层的左上角点为坐标原点
3、图层的锚点anchorPoint：是一个CGPoint值，x，y取值范围（0~1），默认情况都是图层的中心位置为（0.5，0.5） 对于图层本身而言，顾名思义，锚点就用来定位图层的点，保持不动的点。锚点有两个职能：（1）与position一同确定图层相对于父图层的位置；（2）作为图层旋转、平移、缩放的中心。
4、决定图层位置的position：图层的锚点相对于父图层坐标系原点的偏移。

二、概述

CGAffineTransform

CGAffineTransform是一个用于处理形变的类,其可以改变控件的平移、缩放、旋转等,其坐标系统采用的是二维坐标系,即向右为x轴正方向,向下为y轴正方向

在UIView中有一个transform属性便是专门用来控制形变的

CATransform3D

CATransform3D是一个用于处理3D形变的类,其可以改变控件的平移、缩放、旋转、斜交等,其坐标系统采用的是三维坐标系,即向右为x轴正方向,向下为y轴正方向,垂直屏幕向外为z轴正方向,其中旋转的时候遵守右手原则，大拇指指向其正负对应的方向，拇指握拳旋转的方向为其转动方向

在CALayer中有一个transform属性便是专门用来控制3D形变的
CGAffineTransform是可以在UIView的视图上进行处理的，并且只是二阶矩阵，只有tx和ty两个方向，CATransform3D只能在layer层进行操作处理，是三阶矩阵，多了一个ty方向

三、仿射变化

图层变化示意图.png

刚体变化就是每个方向上都是保持单位的标准，不会发生形变，而放大缩小，旋转之类的都是仿射变换，图形的每个位置都是一个有向的 向量 ，仿射变化就是 乘以一个矩阵。

有向向量的意义.png

有向向量在矩阵中的几何应用.png

三维有向向量的应用.png

image.png

那么缩放的本质意义就是在x，y，z轴上面乘以正方向上的有向向量进行缩放

CGAffineTransform类型属于Core Graphics框架，Core Graphics是一个2D绘图API，并且CGAffineTransform仅仅对2D变换有效

仿射变换矩阵是一个3×3的矩阵，如下图所示：

3*3矩阵，通常省略001.png

因为第三列总是(0,0,1)，所以CGAffineTransform数据结构只包含前两列的值。

如果一个仿射变换矩阵乘以一个代表图形上一点(x, y)的行向量，则会生成一个新的向量表示对应的点(x', y')，公式表示如下：

矩阵变换.png

至于是如何计算的，看下面公式：

计算公式.png

这里根据计算公式可以看出，要是想在x轴的方向进行拉伸的时候，只需要让x‘变动即可即让a发生对应变化，b和d保持单位方向上的不变即可在x轴上发生形变

CATransform3D是在Core Animation框架中使用的标准变换矩阵，它能够让图层在3D空间内移动、旋转或者放缩。CATransform3D 是一个可以在3维空间内做变换的4x4的矩阵。

4*4阶矩阵.png

一个三维空间上的点（x, y, z）乘以一个CATransform3D矩阵，则会得到一个对应的三维空间上的点（x', y' z'）。

4阶举证变换.png

四、CGAffineTransform使用和介绍

CGAffineTransform是一个结构体，里面包含的信息如下：

struct CGAffineTransform {
    CGFloat a, b, c, d;
    CGFloat tx, ty;
};

1、a 和 d 用来表示 x 轴和 y 轴的缩放系数。
2、b 和 c 用来表示旋转和剪切变换的元素。
3、tx 和 ty 分别代表 x 轴和 y 轴的平移距离。

方法介绍

• 平移
  CGAffineTransformMakeTranslation实现以初始位置为基准,在x轴方向上平移x单位,在y轴方向上平移y单位

// 格式
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
// 样例
self.demoImageView.transform = CGAffineTransformMakeTranslation(100, 100);

CGAffineTransformTranslate实现以一个已经存在的形变为基准,在x轴方向上平移x单位,在y轴方向上平移y单位

• 平移CGAffineTransformMakeTranslation原理

self.demoImageView.transform = CGAffineTransformMakeTranslation(100, 100);
self.demoImageView.transform = CGAffineTransformMake(1, 0, 0, 1, 100, 100);

• 缩放
  CGAffineTransformMakeScale实现以初始位置为基准,在x轴方向上缩放x倍,在y轴方向上缩放y倍

// 格式
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
// 样例
self.demoImageView.transform = CGAffineTransformMakeScale(2, 0.5);

当sx为正值时,会在x轴方向上缩放x倍,反之,则在缩放的基础上沿着竖直线翻转;当sy为正值时,会在y轴方向上缩放y倍,反之,则在缩放的基础上沿着水平线翻转

CGAffineTransformScale实现以一个已经存在的形变为基准,在x轴方向上缩放x倍,在y轴方向上缩放y倍

• 缩放CGAffineTransformMakeScale原理

self.demoImageView.transform = CGAffineTransformMakeScale(2, 0.5);
self.demoImageView.transform = CGAffineTransformMake(2, 0, 0, 0.5, 0, 0);

• 旋转
  CGAffineTransformMakeRotation实现以初始位置为基准,将坐标系统逆时针旋转angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)

// 格式
CGAffineTransformMakeRotation(CGFloat angle)
// 样例
self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5);

当angle为正值时,表示逆时针旋转坐标系统,反之顺时针旋转坐标系统（因为旋转的本质实际上是控件坐标系的旋转），但是可以简单的记成正值时控件顺时针，负值时为逆时针旋转

CGAffineTransformRotate实现以一个已经存在的形变为基准,将坐标系统逆时针旋转angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)

• 旋转CGAffineTransformMakeRotation原理

self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5);
self.demoImageView.transform = CGAffineTransformMake(cos(M_PI * 0.5), sin(M_PI * 0.5), -sin(M_PI * 0.5), cos(M_PI * 0.5), 0, 0);

• 默认属性
  特殊地,transform属性默认值为CGAffineTransformIdentity,可以在形变之后设置该值以还原到最初状态

• 初始状态CGAffineTransformIdentity原理

self.demoImageView.transform = CGAffineTransformIdentity;
self.demoImageView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);

tx用来控制在x轴方向上的平移,ty用来控制在y轴方向上的平移;a用来控制在x轴方向上的缩放,d用来控制在y轴方向上的缩放;abcd共同控制旋转

五、CATransform3D使用和介绍

CATransform3D的结构体定义及各成员变量的职能如下：

struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};

平移因子： m41（x位置->tx） m42（y位置->ty） m43（z位置->tz）
缩放因子： m11（x位置->sx） m22（y位置->sy）m33(z位置->sz)
切变因子： m21（x位置） m12（y位置）
旋转因子： m13（x位置） m31（y位置）
透视因子： m34(透明度，必须有旋转角度时才能看出效果，正直/负值都有意义)，m34 的默认值是0，可以通过设置 m34 为-1.0 / d 来应用透视效果， d 代表了想象中视角相机和屏幕之间的距离，以像素为单位，实际使用中大概估算一个就好，一般在500～1000的范围内，一个非常微小的值会让它看起来更加失真，而一个非常大的值会让它基本失去透视效果。

• 平移

/* Returns a transform that translates by '(tx, ty, tz)': * t' =  [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]. */
  //返回一个平移变换的transform3D对象 tx，ty，tz 对应x，y，z轴的平移
  CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz);

/* Translate 't' by '(tx, ty, tz)' and return the result:  * t' = translate(tx, ty, tz) * t. */
  //在某个transform3D变换的基础上进行平移变换，t是上一个transform3D，其他参数同上
  CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);

返回的是一个t' = [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]矩阵，x，y，z都是正方向上的单位向量，tx ty tz分别代表沿着xyz移动的距离

• 缩放

/* Returns a transform that scales by `(sx, sy, sz)':* t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1]. */
  //x，y，z分别对应x轴，y轴，z轴的缩放比例
  CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz);
 //在一个transform3D变换的基础上进行缩放变换，其他参数同上
  CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz);

缩放的方式处理的是返回 t' = [sx 0 0 0; 0 sy 0 0; 0 0 sz 0; 0 0 0 1].该矩阵，sx,sy,sz的值分别对应着在xyz轴的方向上分别进行缩放的比例

• 旋转
  
  旋转方向.png

/* Returns a transform that rotates by 'angle' radians about the vector* '(x, y, z)'. If the vector has length zero the identity transform is * returned. */
  //angle参数是旋转的角度，为弧度制 0-2π
  //x，y，z决定了旋转围绕的中轴，取值为-1——1之间，例如（1，0，0）,则是绕x轴旋转（0.5，0.5，0），则是绕x轴与y轴中
  //间45度为轴旋转,依次进行计算
  CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);
  //在一个transform3D的基础上进行旋转变换，其他参数如上
  CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);

在旋转过程中，可以设置m34来控制想象中视角相机和屏幕之间的距离，来实现远小近大的一个视觉效果，同时必须在赋值transform之前设置才会生效
其中在旋转过程中的还有一个就是灭点：当在透视角度绘图的时候，远离相机视角的物体将会变小变远，当远离到一个极限距离，它们可能就缩成了一个点，于是所有的物体最后都汇聚消失在同一个点，该点就叫 灭点。 通常位于图层中心，但也有例外，这就是说，当图层发生变换时，这个点永远位于图层变换之前 anchorPoint（矛点） 的位置。 当改变一个图层的 position ，同时改变了它的灭点，做 3D 变换的时候，如果想把视图通过调整 m34 来让它更加有 3D 效果，应该首先把它放置于屏幕中央，然后通过平移来把它移动到指定位置（而不是直接改变它的position ），这样所有的 3D 图层都共享一个灭点。也就是说想通过m34设置透明度的时候，必须保证不改变它的position（之前动画的时候，改变过position位置之后，位置跟透明度永远对不上），如果想位置发生变动，就使用平移来操作。

• 组合变化

/* Concatenate 'b' to 'a' and return the result: t' = a * b.   CATransform3DConcat */

// 将视图的anchorPoint设置为(0.5, 1.0)，即视图的底边中心点
view.layer.anchorPoint = CGPointMake(0.5, 1.0);

// 创建一个绕x轴旋转45度和缩放变换的组合变换矩阵
CGFloat angle = M_PI_2;
CATransform3D rotationTransform = CATransform3DMakeRotation(angle, 1.0, 0.0, 0.0);
CATransform3D scaleTransform = CATransform3DMakeScale(0.8, 1.2, 1.0);
CATransform3D transform = CATransform3DConcat(rotationTransform, scaleTransform);

示列：先将视图的anchorPoint属性设置为(0.5, 1.0)，以保持视图的底边中心点不变。然后使用CATransform3DMakeRotation方法创建了一个绕x轴旋转角度为90度的旋转变换矩阵，并使用CATransform3DMakeScale方法创建了一个缩放变换矩阵，其中x轴方向上的缩放因子设为0.8，y轴方向上的缩放因子设为1.2。接着使用CATransform3DConcat方法将两个变换矩阵组合成一个变换矩阵，并将该矩阵应用到视图的transform属性上，实现了视图在旋转过程中上半部分缩小一点，下半部分放大一点的效果。

CATransform3DConcat是将其两个CATransform3D类型的矩阵进行重新组合后生成一个新的矩阵来处理

• 默认属性

/* The identity transform: [1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1]. */

CA_EXTERN const CATransform3D CATransform3DIdentity
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));

返回的矩阵是[1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1].

• 判断值

 判断t是否是最初的对象*/
CA_EXTERN bool CATransform3DIsIdentity (CATransform3D t)
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));

/* Returns true if 'a' is exactly equal to 'b'.  判断a和b是否相同*/
CA_EXTERN bool CATransform3DEqualToTransform (CATransform3D a,
    CATransform3D b)
    API_AVAILABLE(macos(10.5), ios(2.0), watchos(2.0), tvos(9.0));

• 反转

/* Invert 't' and return the result. Returns the original matrix if 't' * has no inverse. */
//将一个旋转的效果进行翻转 
CATransform3D CATransform3DInvert (CATransform3D t);

• CATransform3D与CGAffineTransform的转换
  CGAffineTransform是UIKit框架中一个用于变换的矩阵，其作用与CATransform类似，只是其可以直接作用于View，而不用作用于layer，这两个矩阵也可以进行转换，方法如下：

//将一个CGAffinrTransform转化为CATransform3D
CATransform3D CATransform3DMakeAffineTransform (CGAffineTransform m);
//判断一个CATransform3D是否可以转换为CAAffineTransform
bool CATransform3DIsAffine (CATransform3D t);
//将CATransform3D转换为CGAffineTransform
CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);

• 获取结构体
  +(NSValue *)valueWithCATransform3D:(CATransform3D)t，是 NSValue 类的一个类方法，用于将 CATransform3D 结构体 t 包装成 NSValue 对象。这样做的目的是将 CATransform3D 这种 C 语言结构体转换为 Objective-C 对象，以便能够方便地在 Objective-C 的集合类中存储和传递。通过调用 valueWithCATransform3D: 方法，可以创建一个 NSValue 对象，其中包含了传入的 CATransform3D 结构体。这样就可以将 CATransform3D 结构体放入 NSArray、NSDictionary 等 Objective-C 集合类中，方便进行处理和传递。

参考文章

1.CATransform3D基本动画
2.了解CATransform3D，请看这里
3.核心动画-仿射变化