iOS CATransform3D

紧接之前写的CGAffineTransform在此对3D空间内的动画旋转进行分析下。当然在写这篇文章的时候也在网上查阅了大量的资料，虽然都很有帮助，但是我总觉得缺点什么，于是再结合自己的想法，在这里记录一下。在之前的文章中也说过，CATransform3D主要是针对CALayer的3D旋转，关于CALayer的详细属性就不在此处讲解了，相信大家都有了解。首先我们先看下API：

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

typedef struct CATransform3D CATransform3D;

这就是CATransform3D的结构，从API中我们可以看到这其实也是一个矩阵，只不过是一个 4*4的矩阵，我们还是和之前那样分析的一样来分析，先看看矩阵乘法

CATransform3D矩阵乘法

IMG_0730.JPG

结果转换

IMG_0731.JPG

对结果进行分析

先看x'，由于只有m11是在直接改变x的倍数，而m41是在改变x的坐标，所以我们可以很直观的得到下面的结论：

m11：控制x方向上的缩放

m14：控制x方向上的平移

以此类推：我们也可以得到关于y和z轴上的关系

m22：控制y方向上的缩放

m24：控制y方向上的平移

m33：控制z方向上的缩放

m34：控制z方向上的平移

那么剩余的变量我们怎么去理解呢？如果一个图形不是平移或者缩放的话，那么肯定就是发生了旋转 ，所以剩余的应该是控制做图形的旋转。即：

m12、m13、m21、m23、m31、m32控制旋转

那么还有m14、m24、m34、m44了，这个在后面再讲讲，现在我们先来看看关于旋转的几个变量是怎么回事。
这里我先做了一个简单的测试，来对比2D和3D的区别。

先看代码

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];
    
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(30, 80, 40, 40);
    [button addTarget:self action:@selector(CATransform3DTouch:) forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"test" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [self.view addSubview:button];
    
    UIImageView *image_one = [[UIImageView alloc] initWithFrame:CGRectMake(0, 120, 150, 100)];
    image_one.image = [UIImage imageNamed:@"fire_class_1"];
    [self.view addSubview:image_one];
    
    
    UIImageView *image_two = [[UIImageView alloc] initWithFrame:CGRectMake(40, 200, 150, 100)];
    image_two.image = [UIImage imageNamed:@"fire_class_2"];
    [self.view addSubview:image_two];
    
    self.imageone = image_one;
    self.imagetwo = image_two;
}

- (void)CATransform3DTouch:(UIButton *)sender
{
    sender.selected = !sender.selected;
    
    [UIView animateWithDuration:2 animations:^{
        if (sender.selected)
        {
            //CALayer的3D旋转
            CATransform3D turnTrans = CATransform3DMakeRotation(M_PI/4, 0, 0, 1);
            self.imageone.layer.transform = turnTrans;
            
            //UIview的2D旋转
            self.imagetwo.transform = CGAffineTransformMakeRotation(M_PI/4);
            
        }
        else
        {
            self.imageone.layer.transform = CATransform3DIdentity;
            
            self.imagetwo.transform = CGAffineTransformIdentity;
        }
        
    }];
}

效果图

2d_3d.gif

从上面的效果图我们可以看到两者的效果一模一样，那么为什么呢？
分析：
第一幅图由于是在3D的坐标系内进行旋转，而且从代码中可以看到，我在z轴上的值不为0，我们先在心中建立一个空间坐标系，假如我们将一根针直接插入屏幕上(不要真的去拿一根针哈，7坏了，我可赔不起，哈哈)，当作我们的z轴，那么我们现在绕z轴旋转，其实就和2D旋转一样，都是在平面上进行旋转。根据旋转的角度我们可以计算出旋转后的变化，由于这里是绕z轴旋转的，所以应该只有x和y发生了变化，关于三维空间的旋转，我也是想了很久，这里给大家一个连接，三维坐标系的旋转矩阵，通过这里大家应该就能非常明白了，如果绕z轴旋转，那么发生变化的x和y的值可以用下面表示，根据三维旋转中绕z旋θ度得到的结果

12.png

再结合上面的

IMG_0731.JPG

我们一对比，就能得出

m21:和m23一起决定y轴的旋转

同样的道理：

m31:和m32一起决定z轴的旋转

m12:和m13一起决定x轴的旋转

到现在我们就剩下m14、m24、m34、m44了，关于这几个，我在网上查阅了资料。
其中m14和m24都没有什么说明，m34为透视效果，要操作的这个对象要有旋转的角度，否则没有效果。当然,z方向上得有变化才会有透视效果。m44:初始为1，具体是用来干什么的，暂时不知......

下面来看看CATransform3D中的函数的意思

1.非平移，旋转，缩放类

//没有变化，最初的样子
/* The identity transform: [1 0 0 0; 0 1 0 0; 0 0 1 0; 0 0 0 1]. */
const CATransform3D CATransform3DIdentity;

//判断一个transform3D的对象是否是最初的样子
/* Returns true if 't' is the identity transform. */
bool CATransform3DIsIdentity (CATransform3D t);


//比较两个transform3D对象是否等同
/* Returns true if 'a' is exactly equal to 'b'. */
bool CATransform3DEqualToTransform (CATransform3D a, CATransform3D b);

//将两个 transform3D对象变换属性进行叠加，返回一个新的transform3D对象
/* Concatenate 'b' to 'a' and return the result: t' = a * b. */
CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b);

//类似CGAffineTransform 中的CGAffineTransformInvert 代表 反向变换
/* Invert 't' and return the result. Returns the original matrix if 't'
 * has no inverse. */
CA_EXTERN CATransform3D CATransform3DInvert (CATransform3D t)

2.平移，缩放，旋转类

//-----平移
//返回一个平移变换的transform3D对象 tx，ty，tz对应x，y，z轴的平移
CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz);
//在某个transform3D变换的基础上进行平移变换，t是上一个transform3D，其他参数同上
CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);


//-----缩放
//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);


//-----旋转
//angle参数是旋转的角度 ，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);

针对上面的平移，缩放，旋转，我们也可以用kvo的方式进行。

平移

平移.png

kvo方法

//x轴方向平移
[self.imageone.layer setValue:@(100) forKeyPath:@"transform.translation.x"];
//y轴方向平移
[self.imageone.layer setValue:@(100) forKeyPath:@"transform.translation.y"];
//沿着z方向平移
[self.imageone.layer setValue:@(100) forKeyPath:@"transform.translation.z"];

缩放

缩放.png

kvo方法

//沿着x轴方向放大1.5倍数
[self.imageone.layer setValue:@(1.5)forKeyPath:@"transform.scale.x"];
//沿着y轴方向放大1.5倍数
[self.imageone.layer setValue:@(1.5)forKeyPath:@"transform.scale.y"];
//沿着z轴方向放大1.5倍数
[self.imageone.layer setValue:@(1.5)forKeyPath:@"transform.scale.z"];

旋转

旋转.png

//沿着z轴旋转
[self.imageone.layer setValue:@(M_PI_2) forKeyPath:@"transform.rotation.z"];
//沿着x轴旋转
[self.imageone.layer setValue:@(M_PI_2) forKeyPath:@"transform.rotation.x"];
//沿着y轴旋转
[self.imageone.layer setValue:@(M_PI_2) forKeyPath:@"transform.rotation.y"];

3.CATransform3D和CGAffineTransform相互转换

//将一个CGAffineTransform转化为CATransform3D
CATransform3D CATransform3DMakeAffineTransform (CGAffineTransform m);

//判断一个CATransform3D是否可以转换为CGAffineTransform
bool CATransform3DIsAffine (CATransform3D t);

//将CATransform3D转换为CGAffineTransform
CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);

到此关于我对CATransform3D的了解，就差不多这些了，后面我会补充些动画，看到炫酷的动画，心里就痒痒啊。