CATransform3D介绍

CATransform3D:和CGAffineTransform矩阵类似,它是一个4x4的矩阵构成,和CGAffineTransform的差别在于3D的平移和旋转多处了一个z参数,用于图层的旋转,缩放,偏移,歪斜和应用的透视。2d仿射变换介绍
矩阵的意义如下:

 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(整体放大缩小,值越小,放大的倍数越大);

一.API集合

 // 位移
 CA_EXTERN CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)
 CA_EXTERN CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz)
 
 // 缩放
 CA_EXTERN CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz)
 CA_EXTERN CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz)
 
 // 旋转, 沿x轴旋转 沿y轴旋转 沿z轴旋转(相当于平面旋转) 取值都为 -1 ~ 1 之间
 CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
 CA_EXTERN CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

 // 链接2个CATransform3D,相乘
 CA_EXTERN CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b)
 
 // 反转CATransform3D,翻转效果
 CA_EXTERN CATransform3D CATransform3DInvert (CATransform3D t)
 
 // CGAffineTransform 转 CATransform3D,他们的效果相同
 CA_EXTERN CATransform3D CATransform3DMakeAffineTransform (CGAffineTransform m)
 
 // CATransform3D能否用CGAffineTransform来表示,转换的时候应该判断一下
 CA_EXTERN bool CATransform3DIsAffine (CATransform3D t)
 
 // CATransform3D 转 CGAffineTransform
 CA_EXTERN CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t)
 
 // 判断是否是默认的CATransform3D
 CA_EXTERN bool CATransform3DIsIdentity (CATransform3D t)
 
 // 判断2个CATransform3D是否完全一致
 CA_EXTERN bool CATransform3DEqualToTransform (CATransform3D a,
 CATransform3D b)

二.一些API使用的简单介绍
没有做任何变换的参考图

没有做任何变换的参考图.png

1.位移

// 位移 tz 可以设置图层的先后顺序
// CA_EXTERN CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz)
// CA_EXTERN CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz)
// 直接设置transform3D的 m41 m42 m43 也可以到达一样的效果
CATransform3D transform3D = CATransform3DMakeTranslation(50, 50, -1);
layer.transform = transform3D;
位移.png

tx:x轴位置,设置为50,所有向右偏移了50.
ty:y轴位置,设置为50,所有向下偏移了50.
tz:z周位置,设置主要觉得他显示的位置,是否靠近屏幕,设置为-1,因为橘黄色的layer为0,所以远离,出现图中的效果。

2.缩放

// 缩放
// CA_EXTERN CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz)
// CA_EXTERN CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz)
// 也可以直接设置 m11(x缩放) m22(y缩放)m33 对应 sz m44(整体放大缩小,值越小,放大的倍数越大)
// 这里设置sz并没有效果,没有找到原因,可能使用方法不对。
CATransform3D transform3D = CATransform3DMakeScale(0.5, 0.5, 1);
// m44 越小放大的倍数越大,越大放大的倍数越小。
transform3D.m44 = 0.4;
layer.transform = transform3D;
缩放效果图.png

上面的内容可以看出,我先把长和宽缩小了1倍,然后在整理放大了1.25倍。所有结果输出如上,图片放大了。

3.旋转

// 旋转, 沿x轴旋转 沿y轴旋转 沿z轴旋转(相当于平面旋转) 取值都为 -1 ~ 1 之间
// CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
// CA_EXTERN CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

这里对橘黄色的背景设置了一个透明度

// 旋转, 沿x轴旋转 沿y轴旋转 沿z轴旋转(相当于平面旋转) 取值都为 -1 ~ 1 之间
// CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
// CA_EXTERN CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
// x轴旋转45°
CATransform3D transform3D = CATransform3DMakeRotation(M_PI_4, 1, 1, 1);
layer.transform = transform3D;
[self NSLogWithTransform3D:transform3D];
旋转.png

angle x y z 共同决定了 m11 ~ m33 之间的参数值。由于我没有找到一个算法和规律这里不进行说明,有兴趣的可以自行研究。

4.透视效果
a.m14 m24 m34 都能才生layer内容的变形(透视效果),m34只能在图片做了旋转后才有效果。
b.m14 m24 m34 在旋转的时候选设置和后设置,都会产生不同的效果。m14 m24 m34的值会影响旋转函数的设置值。
c.必须先设置 m34,然后再做旋转,不然不会产生效果
d.m14 m24 m34 的默认值是0,我们可以通过设置m34为-1.0 / d来应用透视效果,这里d代表了想象中视角和屏幕之间的距离,以像素为单位,d通常为500-1000,d正负都可以。
e.通常情况下m34配合旋转来使用透视效果。

// 以layer的中心开始,左右分别成渐变的放大缩小,
CATransform3D transform3D = CATransform3DIdentity;
transform3D.m14 = -0.005;
layer.transform = transform3D;
m14 = -0.05
// 以layer的中心开始,上下分别成渐变的放大缩小,
CATransform3D transform3D = CATransform3DIdentity;
transform3D.m24 = -0.005;
layer.transform = transform3D;
m24 = -0.05
// m34只能在图片做了旋转后才有效果。
CATransform3D transform3D = CATransform3DIdentity;
// 必须先设置 m34,然后再做旋转,不然不会产生效果
transform3D.m34 = -0.005;
transform3D = CATransform3DRotate(transform3D, M_PI_4, 0, 1, 0);
layer.transform = transform3D;
m34 = -0.005

5.灭点

当在透视角度绘图的时候,远离相机视角的物体将会变小变远,当远离到一个极限距离,它们可能就缩成了一个点,于是所有的物体最后都汇聚消失在同一个点。在做3d视图变换的时候,应该重这个点开始考虑。
当改变一个图层的position,你也改变了它的灭点,当你视图通过调整m34来让它更加有3D效果,应该首先把它放置于屏幕中央,然后通过平移来把它移动到指定位置(而不是直接改变它的position),这样所有的3D图层都共享一个灭点。

举例:CALayer有一个属性叫做sublayerTransform。它也是CATransform3D类型,但和对一个图层的变换不同,它影响到所有的子图层。通过在一个地方设置透视变换会很方便,同时它会带来另一个显著的优势:灭点被设置在容器图层的中点,从而不需要再对子图层分别设置了。这意味着你可以随意使用position和frame来放置子图层,而不需要把它们放置在屏幕中点,然后为了保证统一的灭点用变换来做平移。

CALayer *content_layer = [CALayer layer];
content_layer.bounds  = CGRectMake(0, 0, 300, 300);
content_layer.position = self.view.center;
content_layer.backgroundColor = [UIColor blackColor].CGColor;

[self.view.layer addSublayer:content_layer];

CALayer *layer1 = [CALayer layer];
layer1.frame = CGRectMake(30, 20, 120, 260);
layer1.backgroundColor = [UIColor redColor].CGColor;
layer1.opacity = 0.6;
[content_layer addSublayer:layer1];

CALayer *layer2 = [CALayer layer];
layer2.frame = CGRectMake(150, 20, 120, 260);
layer2.backgroundColor = [UIColor orangeColor].CGColor;
layer2.opacity = 0.6;
[content_layer addSublayer:layer2];

CATransform3D content_transform3D = CATransform3DIdentity;
content_transform3D.m34 = -0.005;
content_layer.sublayerTransform = content_transform3D;


CATransform3D transform1 = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
layer1.transform = transform1;


CATransform3D transform2 = CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);
layer2.transform = transform2;
//    这里是单独对sublayer就行透视的代码
//    CATransform3D transform1 = CATransform3DIdentity;
//    transform1.m34 = -0.005;
//    transform1 = CATransform3DRotate(transform1, M_PI_4, 0, 1, 0);
//    layer1.transform = transform1;
//    
//    
//    CATransform3D transform2 = CATransform3DIdentity;
//    transform2.m34 = -0.005;
//    transform2 = CATransform3DRotate(transform2, -M_PI_4, 0, 1, 0);
//    layer2.transform = transform2;
对sublayerTransform设置
单独设置.png

可以看出2种效果不同,因为他们的灭点不同。

7.CALayer有一个叫做doubleSided的属性来控制图层的背面是否要被绘制

参考资料
学习demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容