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

移动开发 得得之家
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 效果如下。

如果绿色的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"];

二、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;
效果如下：

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;
效果如下：

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;
效果如下：

另外，当我们有垂直于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轴的旋转变换，第二个有透视效果，第一个没有，运行如下：

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);

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

iOS实现图片六边形阴影效果
这篇文章给大家分享了如何利用iOS实现图片六边形阴影的效果，文中给出实现的示例代码，对大家的理解和学习很有帮助，有需要的可以参考借鉴，下面来一起看看吧。
iOS中Block的回调使用和解析详解
刚刚进入iOS开发行业，发现开发中要用到大量的block回调，由此可见它的重要性。本文主要讲的是 Block 回调的使用，以及 Block 是如何实现这种神奇的回调两部分来讲的,下面来一起看看吧。
iOS10实现推送功能时的注意点和问题总结
很多朋友都反馈，发现了iOS9升级到iOS10推送功能不正常的问题，所以这篇文章总结了一下要点，亲们可以根据以下步骤，逐步排查问题，也可以逐步实现iOS10的推送功能。下面来一起看看吧。
iOS如何获取当前View所在控制器的方法
在开发iOS的时候经常需要获取当前View所在的控制器，下面小编给大家分享个方法，文章给出了示例代码，对大家的学习和理解很有帮助，下面来一起看看吧。
iOS实现只有底部边框线的输入框示例代码
这篇文章给大家分享了一种利用iOS实现只有底部边框线的输入框，其实这个效果也挺常见的，本文给出了示例代码，下面来看看如何实现这种效果。
iOS 委托与文本输入（内容根据iOS编程编写）
这篇文章主要介绍了iOS 委托与文本输入（内容根据iOS编程编写） 的相关资料,需要的朋友可以参考下
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式