CATransform3D

啸笑天

浏览: 3462052 次
性别:
来自: China

最近访客更多访客>>

zbguohua

rangelee

chen88358323

lucifer821031

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ios
ios-animation

CATransform3D 的数据结构定义了一个同质的三维变换（4x4 CGFloat值的矩阵），用于图层的旋转，缩放，偏移，歪斜和应用的透视。

图层的2个属性指定了变换矩阵：transform 和 sublayerTransform。

transform ：是结合 anchorPoint（锚点）的位置来对图层和图层上的子图层进行变化。

sublayerTransform：是结合anchorPoint（锚点）的位置来对图层的子图层进行变化，不包括本身。

CATransform3DIdentity 是单位矩阵，该矩阵没有缩放，旋转，歪斜，透视。该矩阵应用到图层上，就是设置默认值。

初始化方法：CATransform3DMakeTranslation

官方文档：

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].

CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)。

做一个解释，对于初学者来说，可能没有看明白是什么意思。我详细说下

对于CATransform3D来说，它是一个4x4 CGFloat的矩阵。

而上面给的值：[1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1].

给竖起来后。就发现：

1 0 0 0

0 1 0 0

0 0 1 0

tx ty tz 1

竖起来看就很明显了。

CATransform3D 又是一个结构。他有自己的一个公式，可以进行套用。

struct CATransform3D

{

CGFloat m11（x缩放）, m12（y切变）, m13（旋转）, m14（）;

CGFloat m21（x切变）, m22（y缩放）, m23（） , m24（）;

CGFloat m31（旋转） , m32（） , m33（） , m34（透视效果，要操作的这个对象要有旋转的角度，否则没有效果。正直/负值都有意义）;

CGFloat m41（x平移）, m42（y平移）, m43（z平移） , m44（）;

};

根据这个公式，就一目了然了。

CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)

的参数意思就是

tx:：x平移。 ty：y平移。 tz：z平移

换换函数：

CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)

tx：X轴偏移位置，往下为正数。

ty：Y轴偏移位置，往右为正数。

tz：Z轴偏移位置，往外为正数。

例：

如果有2个图层，一个是绿色的，一个是红色的。先加载绿色，后加载红色。

tx，ty的左右偏移先不说了。

如果绿色的tz为-10 ，红色的tz为 0 效果如下：

如果绿色的tz为 0 ，红色的tz为-10 效果如下：

对于tz来说，值越大，那么图层就越往外（接近屏幕），值越小，图层越往里（屏幕里）。

CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);

t：就是上一个函数。其他的都一样。

就可以理解为：函数的叠加，效果的叠加。

CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz);

sx：X轴缩放，代表一个缩放比例，一般都是 0 --- 1 之间的数字。

sy：Y轴缩放。

sz：整体比例变换时，也就是m11（sx）== m22（sy）时，若m33（sz）>1，图形整体缩小，若0<1，图形整体放大，若m33（sz）<0，发生关于原点的对称等比变换。

当sx = 1，sy = 1时。如图：

当sx = 0.5，sy = 0.5时。如图：

CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz)

t：就是上一个函数。其他的都一样。

就可以理解为：函数的叠加，效果的叠加。

CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);

旋转效果。

angle：旋转的弧度，所以要把角度转换成弧度：角度 * M_PI / 180。

x：向X轴方向旋转。值范围-1 --- 1之间

y：向Y轴方向旋转。值范围-1 --- 1之间

z：向Z轴方向旋转。值范围-1 --- 1之间

例：向X轴旋转60度。

向Y轴旋转60度。

向Z轴旋转60度。

向 X轴，Y轴都旋转60度，就是沿着对角线旋转。

可以通过X，Y，Z轴同时变化，来旋转图像。

CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);

t：就是上一个函数。其他的都一样。

就可以理解为：函数的叠加，效果的叠加。

CATransform3D CATransform3DInvert (CATransform3D t);

翻转效果。

未使用

使用

CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);

bool CATransform3DIsAffine (CATransform3D t);

仿射效果。

就是把一个 CATransform3D 对象转换成一个 CGAffineTransform 对象。

也就是把 CATransform3D 矩阵转换成 CGAffineTransform 矩阵

变换函数同时提供了可以比较一个变换矩阵是否是单位矩阵,或者两个矩阵是否相等。

bool CATransform3DIsIdentity (CATransform3D t);

bool CATransform3DEqualToTransform (CATransform3D a, CATransform3D b);

也可以通过修改数据结构和键值来设置变换效果。

struct CATransform3D

{

CGFloat m11, m12, m13, m14；

CGFloat m21, m22, m23, m24；

CGFloat m31, m32, m33, m34；

CGFloat m41, m42, m43, m44；

}

可以直接修改其中的一个值，来达到相同的效果。

或者修改键值

[myLayer setValue:[NSNumber numberWithInt:0] forKeyPath:@"transform.rotation.x"];

一些属性：

上面的左右旋转，看起来图层并没有被旋转，而是仅仅在水平方向上的一个压缩，是哪里出了问题呢？

其实完全没错，视图看起来更窄实际上是因为我们在用一个斜向的视角看它，而不是透视。

透视投影

在真实世界中，当物体远离我们的时候，由于视角的原因看起来会变小，理论上说远离我们的视图的边要比靠近视角的边跟短，但实际上并没有发生，而我们当前的视角是等距离的，也就是在3D变换中任然保持平行，和之前提到的仿射变换类似。

在等距投影中，远处的物体和近处的物体保持同样的缩放比例，这种投影也有它自己的用处（例如建筑绘图，颠倒，和伪3D视频），但当前我们并不需要。

为了做一些修正，我们需要引入投影变换（又称作z变换）来对除了旋转之外的变换矩阵做一些修改，Core Animation并没有给我们提供设置透视变换的函数，因此我们需要手动修改矩阵值，幸运的是，很简单：

CATransform3D的透视效果通过一个矩阵中一个很简单的元素来控制：m34。m34（图5.9）用于按比例缩放X和Y的值来计算到底要离视角多远。

图5.9 CATransform3D的m34元素，用来做透视

m34的默认值是0，我们可以通过设置m34为-1.0 / d来应用透视效果，d代表了想象中视角相机和屏幕之间的距离，以像素为单位，那应该如何计算这个距离呢？实际上并不需要，大概估算一个就好了。

因为视角相机实际上并不存在，所以可以根据屏幕上的显示效果自由决定它的防止的位置。通常500-1000就已经很好了，但对于特定的图层有时候更小后者更大的值会看起来更舒服，减少距离的值会增强透视效果，所以一个非常微小的值会让它看起来更加失真，然而一个非常大的值会让它基本失去透视效果，对视图应用透视的代码见清单5.5，结果见图5.10。

清单5.5 对变换应用透视效果

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //create a new transform
    CATransform3D transform = CATransform3DIdentity;
    //apply perspective
    transform.m34 = - 1.0 / 500.0;
    //rotate by 45 degrees along the Y axis
    transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);
    //apply to layer
    self.layerView.layer.transform = transform;
}

@end