紧接之前写的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的了解，就差不多这些了，后面我会补充些动画，看到炫酷的动画，心里就痒痒啊。
