神刀安全网

iOS CATransform3D

紧接之前写的CGAffineTransform在此对3D空间内的动画旋转进行分析下。当然在写这篇文章的时候也在网上查阅了大量的资料,虽然都很有帮助,但是我总觉得缺点什么,于是再结合自己的想法,在这里记录一下。在之前的文章中也说过,CATransform3D主要是针对CALayer3D旋转,关于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矩阵乘法
iOS CATransform3D

4*4矩阵乘法计算.png

结果转换
iOS CATransform3D

计算结果.jpeg

对结果进行分析

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

m11:控制x方向上的缩放
m41:控制x方向上的平移

以此类推:我们也可以得到关于yz轴上的关系

m22:控制y方向上的缩放
m42:控制y方向上的平移
m33:控制z方向上的缩放
m43:控制z方向上的平移

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

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

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

先看代码

- (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;         }      }]; }

效果图

iOS CATransform3D

2d_3d.gif

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

iOS CATransform3D

12.png

再结合上面的

iOS CATransform3D

计算结果.jpeg

我们一对比,就能得出

m21:和m12一起决定z轴的旋转

同样的道理:

m31:和m13一起决定y轴的旋转
m32:和m23一起决定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的方式进行。

平移

iOS CATransform3D

平移.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"];

缩放

iOS CATransform3D

缩放.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"];

旋转

iOS CATransform3D

旋转.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.CATransform3DCGAffineTransform相互转换

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

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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS CATransform3D

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址