服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - IOS - 详解iOS的Core Animation框架中的CATransform3D图形变换

详解iOS的Core Animation框架中的CATransform3D图形变换

2021-01-21 15:44珲少 IOS

CATransform3D一般用于操作view的layer的,是Core Animation的结构体,可以用来做比较复杂的3D操作,这里我们就带大家来详解iOS的Core Animation框架中的CATransform3D图形变换

一、矩阵坐标
catransform3d定义了一个变化矩阵,通过对矩阵参数的设置,我们可以改变layer的一些属性,这个属性的改变,可以产生动画的效果。
catransform3d catransform3dmaketranslation (cgfloat tx, cgfloat ty, cgfloat tz)
tx:x轴偏移位置,往下为正数。
ty:y轴偏移位置,往右为正数。
tz:z轴偏移位置,往外为正数。
例:
如果有2个图层,一个是绿色的,一个是红色的。先加载绿色,后加载红色。
tx,ty的左右偏移先不说了。
如果绿色的tz为-10 ,红色的tz为 0 效果如下。

详解iOS的Core Animation框架中的CATransform3D图形变换

如果绿色的tz为 0 ,红色的tz为-10 效果如下。

详解iOS的Core Animation框架中的CATransform3D图形变换

对于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时。如图:

详解iOS的Core Animation框架中的CATransform3D图形变换

当sx = 0.5,sy = 0.5时。如图:

详解iOS的Core Animation框架中的CATransform3D图形变换

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度。

详解iOS的Core Animation框架中的CATransform3D图形变换

向y轴旋转60度。

详解iOS的Core Animation框架中的CATransform3D图形变换

向z轴旋转60度。

详解iOS的Core Animation框架中的CATransform3D图形变换

向 x轴,y轴都旋转60度,就是沿着对角线旋转。

详解iOS的Core Animation框架中的CATransform3D图形变换
可以通过x,y,z轴同时变化,来旋转图像。
catransform3d catransform3drotate (catransform3d t, cgfloat angle, cgfloat x, cgfloat y, cgfloat z);
t:就是上一个函数。其他的都一样。
就可以理解为:函数的叠加,效果的叠加。
catransform3d catransform3dinvert (catransform3d t);
翻转效果。

详解iOS的Core Animation框架中的CATransform3D图形变换详解iOS的Core Animation框架中的CATransform3D图形变换

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"];

二、catransform3d中的属性和方法
//初始化一个transform3d对象,不做任何变换
const catransform3d catransform3didentity;
//判断一个transform3d对象是否是初始化的对象
bool catransform3disidentity (catransform3d t);
//比较两个transform3d对象是否相同
bool catransform3dequaltotransform (catransform3d a, catransform3d b);
//将两个 transform3d对象变换属性进行叠加,返回一个新的transform3d对象
catransform3d catransform3dconcat (catransform3d a, catransform3d b);

1、平移变换
//返回一个平移变换的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);

例如:

    uiimageview * imageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 100, 100, 100)];
    imageview.image = [uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:imageview];
   
    uiimageview * newimageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 100, 100, 100)];
    newimageview.image=[uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:newimageview];
    catransform3d trans = catransform3dmaketranslation(10, 200, 0);
    newimageview.layer.transform =trans;

效果如下:

详解iOS的Core Animation框架中的CATransform3D图形变换

2、缩放变换
//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);
例如:
uiimageview * imageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 100, 100, 100)];
    imageview.image = [uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:imageview];
   
    uiimageview * newimageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 300, 100, 100)];
    newimageview.image=[uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:newimageview];
    catransform3d trans = catransform3dmakescale(2, 1, 1);
    newimageview.layer.transform =trans;

效果如下:

详解iOS的Core Animation框架中的CATransform3D图形变换

3、旋转变换
//angle参数是旋转的角度,为弧度制 0-2π
//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);

例如:
uiimageview * imageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 100, 100, 100)];
    imageview.image = [uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:imageview];
   
    uiimageview * newimageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 300, 100, 100)];
    newimageview.image=[uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:newimageview];
    catransform3d trans = catransform3dmakerotation(m_pi/2, 0, 0, 1);
    newimageview.layer.transform =trans;

效果如下:

详解iOS的Core Animation框架中的CATransform3D图形变换

另外,当我们有垂直于z轴的旋转分量时,设置m34的值可以增加透视效果,也可以理解为景深效果,例如:

    uiimageview * imageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 100, 100, 100)];
    imageview.image = [uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    imageview.layer.transform = catransform3dmakerotation(m_pi/4, 0, 1, 0);
    [self.view addsubview:imageview];
   
    uiimageview * newimageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 300, 100, 100)];
    newimageview.image=[uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:newimageview];
    catransform3d trans = catransform3didentity;
    trans.m34 = -1/100.0;
    trans = catransform3drotate(trans, m_pi/4, 0, 1, 0); 
    newimageview.layer.transform =trans;

两个imageview都进行了y轴的旋转变换,第二个有透视效果,第一个没有,运行如下:

详解iOS的Core Animation框架中的CATransform3D图形变换

4、旋转翻转变换
//将一个旋转的效果进行翻转
catransform3d catransform3dinvert (catransform3d t);

例如:
    uiimageview * imageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 100, 100, 100)];
    imageview.image = [uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    imageview.layer.transform = catransform3dmakerotation(m_pi/4, 0, 0, 1);
    [self.view addsubview:imageview];
   
    uiimageview * newimageview = [[uiimageview alloc]initwithframe:cgrectmake(100, 300, 100, 100)];
    newimageview.image=[uiimage imagenamed:@"屏幕快照 2015-12-06 下午3.27.15.png"];
    [self.view addsubview:newimageview];
    catransform3d trans = catransform3dmakerotation(m_pi/4, 0, 0, 1);
    trans = catransform3dinvert(trans);
   
    newimageview.layer.transform =trans;

5、catransform3d与cgaffinetransform的转换
cgaffinetransform是uikit框架中一个用于变换的矩阵,其作用与catransform类似,只是其可以直接作用于view,而不用作用于layer,这两个矩阵也可以进行转换,方法如下:
//将一个cgaffinrtransform转化为catransform3d
catransform3d catransform3dmakeaffinetransform (cgaffinetransform m);
//判断一个catransform3d是否可以转换为caaffinetransform
bool catransform3disaffine (catransform3d t);
//将catransform3d转换为cgaffinetransform
cgaffinetransform catransform3dgetaffinetransform (catransform3d t);

延伸 · 阅读

精彩推荐
  • IOSiOS通过逆向理解Block的内存模型

    iOS通过逆向理解Block的内存模型

    自从对 iOS 的逆向初窥门径后,我也经常通过它来分析一些比较大的应用,参考一下这些应用中某些功能的实现。这个探索的过程乐趣多多,不仅能满足自...

    Swiftyper12832021-03-03
  • IOS关于iOS自适应cell行高的那些事儿

    关于iOS自适应cell行高的那些事儿

    这篇文章主要给大家介绍了关于iOS自适应cell行高的那些事儿,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的...

    daisy6092021-05-17
  • IOS解析iOS开发中的FirstResponder第一响应对象

    解析iOS开发中的FirstResponder第一响应对象

    这篇文章主要介绍了解析iOS开发中的FirstResponder第一响应对象,包括View的FirstResponder的释放问题,需要的朋友可以参考下...

    一片枫叶4662020-12-25
  • IOSIOS 屏幕适配方案实现缩放window的示例代码

    IOS 屏幕适配方案实现缩放window的示例代码

    这篇文章主要介绍了IOS 屏幕适配方案实现缩放window的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要...

    xiari5772021-06-01
  • IOSIOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解

    这篇文章主要介绍了IOS开发之字典转字符串的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这样的方法,需要的朋友可以参考下...

    苦练内功5832021-04-01
  • IOSiOS 雷达效果实例详解

    iOS 雷达效果实例详解

    这篇文章主要介绍了iOS 雷达效果实例详解的相关资料,需要的朋友可以参考下...

    SimpleWorld11022021-01-28
  • IOSiOS布局渲染之UIView方法的调用时机详解

    iOS布局渲染之UIView方法的调用时机详解

    在你刚开始开发 iOS 应用时,最难避免或者是调试的就是和布局相关的问题,下面这篇文章主要给大家介绍了关于iOS布局渲染之UIView方法调用时机的相关资料...

    windtersharp7642021-05-04
  • IOSiOS中tableview 两级cell的展开与收回的示例代码

    iOS中tableview 两级cell的展开与收回的示例代码

    本篇文章主要介绍了iOS中tableview 两级cell的展开与收回的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    J_Kang3862021-04-22