关于图层的几个坐标系。

对于ios来说，坐标系的（0，0）点在左上角，就是越往下，Y值越大。越往右，X值越大。

一个图层的frame，它是position，bounds，anchorPoint和transform属性的一部分。

设置一个新的frame将会相应的改变图层的position和bounds，但是frame本身并没有保存。

position：是一个CGPoint值，它指定图层相当于它父图层的位置，该值基于父图层的坐标系。

bounds：是一个CGRect值，指定图层的大小（bounds.size）和图层的原点（bounds.origin），这个坐标系是基于自身的。如果改变bounds的origin，那么在该图层的子图层，坐标会跟着改变。也就是说，改变自身的坐标系，本身在父图层的位置不变，但它上的子图层位置变化。

anchorPoint：是一个CGPoint值，它是指定了一个基于bounds的符合坐标系的位置。锚点（anchor point）制定了bounds相对于position的值，同时也作为一个变化时候的中心点。锚点使用空间坐标系取值范围是0-1之间的数。默认是0.5，也就是秃瓢的中心点，如果是（0，0）那么，图层向左上方移动。如果是（1，1）就向右下方移动。

看下面的两个图，就能够够清晰的看出锚点变化所带来的不一样。（此图为MAC OS 坐标系，如果是IOS，那么（0，0）点在图的左上方。）

对于anchorPoint的解释在ios中如图：

下图中的红点位置就是 锚点的位置：默认为（0.5，0.5）。在对图像进行变换时，都是按照这个点来进行缩放，偏移等。

一旦修改锚点的位置为：（0，0），那么图像就会变成下图。各种变换就会按照这个点来运动。

所以说，在ios系统中，锚点的坐标系是：左上角为（0，0），右下角为（1，1）。

根据此图，在理解上面的定义，就直观了一些。

//

//

//

<wbr></wbr>

图层的几何变换。

可以通过矩阵来改变一个图层的几何形状。

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

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

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

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

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

//

//

//

变换函数

CATransform3DMakeTransla<wbr>tion<wbr><br></wbr></wbr>

官方文档：

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 CATransform3DMakeTransla<wbr>tion (CGFloat tx, CGFloat ty, CGFloat tz)。</wbr>

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

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

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

给竖起来后。就发现：

1<wbr><wbr><wbr>0<wbr><wbr>0<wbr><wbr>0</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

0<wbr><wbr><wbr>1 <wbr><wbr>0<wbr><wbr>0</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

0<wbr><wbr>0<wbr><wbr>1<wbr><wbr>0</wbr></wbr></wbr></wbr></wbr></wbr>

tx<wbr>ty <wbr>tz<wbr><wbr>1</wbr></wbr></wbr></wbr>

竖起来看就很明显了。

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

<wbr></wbr>

struct<wbr><code>CATransform3D</code></wbr>
{
CGFloat<wbr><wbr><wbr><wbr>m11（x缩放）,<wbr><wbr><wbr>m12（y切变）,<span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m13（旋转）,<wbr><span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></code></span></span>m14（）;<br><br></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>
CGFloat<wbr><wbr><wbr><wbr>m21（x切变）,<wbr><span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr></wbr></wbr></wbr></code></span></span>m22（y缩放）,<wbr><span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m23（）,<span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m24（）;<br><br></wbr></wbr></wbr></wbr></wbr></wbr>
CGFloat<wbr><wbr><wbr><wbr>m31（旋转）,<wbr><span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m32（ ）,<wbr><span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m33（）,<span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m34（透视效果，要操作的这个对象要有旋转的角度，否则没有效果。正直/负值都有意义）;<br><br></wbr></wbr></wbr></wbr></wbr></wbr>
CGFloat<wbr><wbr><wbr><wbr>m41（x平移）,<span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m42（y平移）,<span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></code></span></span>m43（z平移）,<wbr><span style="word-wrap:normal; word-break:normal; font-family:'Comic sans Ms'"><span style="word-wrap:normal; word-break:normal"><code><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></code></span></span>m44（）;</wbr></wbr></wbr></wbr></wbr>
};

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

<wbr></wbr>

CATransform3DCATransform3DMakeTransla<wbr>tion(CGFloat tx, CGFloat ty, CGFloat tz)</wbr>

的参数意思就是<wbr><br></wbr>

tx:：x平移。<wbr>ty：y平移。<wbr>tz：z平移<br></wbr></wbr>

//
//
//

换换函数：

CATransform3D CATransform3DMakeTransla<wbr>tion (CGFloat tx, CGFloat ty, CGFloat tz)</wbr>

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

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

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

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

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

如果绿色的tz为-10<wbr>，<span style="word-wrap:normal; word-break:normal; background-color:rgb(255,0,0)">红色</span>的tz为<span style="word-wrap:normal; word-break:normal; color:rgb(51,51,255)"><wbr>0</wbr></span><wbr>效果如下。</wbr></wbr>

如果绿色的tz为<wbr>0</wbr><wbr>，<span style="word-wrap:normal; word-break:normal; background-color:rgb(255,0,0)">红色</span>的tz为<span style="word-wrap:normal; word-break:normal; color:rgb(51,51,255)">-10</span><wbr>效果如下。</wbr></wbr>

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

CATransform3DCATransform3DTranslate (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)

<wbr></wbr>

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

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

CATransform3D CATransform3DMakeRotatio<wbr>n (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);</wbr>

旋转效果。

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

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

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

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

该CATransform3DMakeRotation函数创建了一个转变，将在三维轴坐标系以任意弧度旋转层。x-y-z轴的有个确定的范围（介于-1 和+1之间） 。相应的坐标轴指定的值告诉系统在该轴上旋转。例如，如果X轴是设置为-1或1 ，该对象将的X轴的方向上旋转，这意味着将把它垂直旋转。把这些值看做是插入在图像每个坐标轴上的秸秆（Think of these values as inserting straws through the image for each axis.）。如果秸秆插过x轴，图像将沿着秸秆垂直旋转。您可以使用坐标轴角度值创建更复杂的旋转。。对于大多数的用途，但是，值介于-1和+1已经足够。

例：向X轴旋转60度。<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="word-wrap:normal; word-break:normal">向Y轴旋转60度。<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="word-wrap:normal; word-break:normal">向Z轴旋转60度。</span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span><br></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><img src="https://img-my.csdn.net/uploads/201204/12/1334208076_1359.png" alt="" height="148" width="145" title="CATransform3D&lt;wbr&gt;特效详解" style="margin:0px; padding:0px; border:0px none; list-style:none"><wbr><wbr><wbr><wbr><wbr><wbr><img src="https://img-my.csdn.net/uploads/201204/12/1334208197_4641.png" alt="" height="153" width="160" title="CATransform3D&lt;wbr&gt;特效详解" style="margin:0px; padding:0px; border:0px none; list-style:none"><br></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

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

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

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

<wbr></wbr>

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

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

CATransform3D CATransform3DInvert (CATransform3D t);

翻转效果。

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="word-wrap:normal; word-break:normal; color:rgb(255,204,0)"><span style="word-wrap:normal; word-break:normal; color:rgb(255,0,0)"><span style="word-wrap:normal; word-break:normal; background-color:rgb(102,255,255)">未使用</span><wbr><wbr></wbr></wbr></span><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span><span style="word-wrap:normal; word-break:normal; color:rgb(255,204,0)"><span style="word-wrap:normal; word-break:normal; color:rgb(255,0,0); background-color:rgb(102,255,255)">使用</span></span></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><img src="https://img-my.csdn.net/uploads/201204/12/1334210219_6168.png" alt="" height="192" width="196" title="CATransform3D&lt;wbr&gt;特效详解" style="margin:0px; padding:0px; border:0px none; list-style:none"></wbr></wbr>

CGAffineTransform CATransform3DGetAffineTr<wbr>ansform (CATransform3D t);</wbr>

bool CATransform3DIsAffine (CATransform3D t);

仿射效果。

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

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

<wbr></wbr>

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

bool CATransform3DIsIdentity (CATransform3D t);

bool CATransform3DEqualToTran<wbr>sform (CATransform3D a, CATransform3D b);</wbr>

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

<wbr></wbr>

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

CoreAnimation-CATransform3D特效相关推荐

  1. CATransform3D 特效详解

    看了一篇关于CATransform3D 特效详解   记录一下  以后慢慢看 关于图层的几个坐标系. 对于ios来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大.越往右,X值越大. 一个图层的 ...

  2. iOS开发CoreAnimation解读之三——几种常用Layer的使用解析

    iOS开发CoreAnimation解读之三--几种常用Layer的使用解析 一.CAEmitterLayer CAEmitterLayer是CoreAnimation框架中的粒子发射层,在以前的一片 ...

  3. iOS CoreAnimation

    为什么80%的码农都做不了架构师?>>>    前言:这篇文章太全了,忍不住就转了,原地址 CoreAnimation,另外前面写过一篇简单的动画IOS简单动画 核心动画,开发人员可 ...

  4. iOS CoreAnimation专题——实战篇（四）基于拖动手势的视图3D旋转效果

    二维图像的显示 矩阵变换 基向量 线性变换 线性变换的复合 平移变换 齐次坐标 齐次坐标下的点和向量的区别 齐次坐标下的平移变换 齐次坐标下的平行线相交问题 CATransform3D 基于CATra ...

  5. iOS动效-利用CATransform3D实现翻页动画效果

    从事iOS开发已经有一段时间了,之前一直忙于工作,几乎很少有时间写一些东西来对自己掌握的技术进行一下总结,现在想想,有些后悔,因为之前在遇见问题的时候或者学习新技术的时候都是在翻看他人的博客或者查看苹 ...

  6. iOS 烟花撒花效果，图层渐变，图层倒影特效。CAEmitterLayer粒子发射器

    iOS 烟花撒花效果,图层渐变,图层倒影特效.CAEmitterLayer粒子发射器 上一节我写了一个关于视图图层的相关类,有关CALayer这个类的使用和一些用法,具体看这里,就是我们在处理视图的时 ...

  7. 视频特效制作：如何给视频添加边框、水印、动画以及3D效果

    from : http://www.cocoachina.com/ios/20141208/10542.html 本文内容来自raywenderlich的这篇文章的翻译:AVFoundation Tu ...

  8. 在 iOS 中使用 GLSL 实现抖音特效

    本文通过模仿抖音中几种特效的实现,来讲解 GLSL 的实际应用. 前言 本文的灵感来自于 <当一个 Android 开发玩抖音玩疯了之后(二)> 这篇文章. 这位博主在 Android 平 ...

  9. iOS粒子特效、仿微信朋友圈、转场动画、抢红包动画等源码

    iOS精选源码 viewController 之间的转场动画 swift版 视频添加水印及粒子特效 小红点(消息推送提醒)完整解决方案 仿微信朋友圈–CircleOfFriendsDisplay 图片 ...

最新文章

  1. 3D视觉从入门到进阶学习路线
  2. CentOS 7编译安装php7.0.7以及可能遇到的问题的解决方案
  3. （七）日志采集工具sleuth--分布式链路跟踪（zipkin）
  4. FPGA与MCU，DSP（如C6000,C5000等）等设计思想的异同
  5. HandlerInterceptorAdapter或HandlerInterceptor的使用
  6. Android textview字体颜色显示和图片显示
  7. android显示绘图动画,Android自定义View绘图实现渐隐动画
  8. java jni helloword_JNI学习一：编写HelloWorld程序
  9. 思科交换机Portfast和Uplinkfast配置实验
  10. CMakeList.txt的简介
  11. 批量修改文件夹或文件权限
  12. c++驱动键鼠源码_Android移植FM芯片RDA5807M驱动指导
  13. php 创建 cookie文件,php创建、获取cookie及基础要点分析
  14. CSS颜色代码（转载）
  15. 笨鸟先飞学编程系列之二 基础代码的编写
  16. 有服务器还需要网站空间吗,有服务器还需要空间吗
  17. NPDP产品经理小知识：黄金圈法则
  18. mysql码表是什么意思_什么是码表，什么是维度表？
  19. 什么是安时数(AH)
  20. 安科瑞AWT100-4G物联网通讯终端 无线通讯终端 数据传输单元

热门文章

  1. Java Platform SE 8（Java概念图的描述）中文文档
  2. android自定义弹出框样式实现
  3. shell_script_查询主机名、ip地址 、DNS地址
  4. 拆解百度自动驾驶最新动作：Apollo企业版和Apollo 3.5里的生意经和新风向 | CES 2019...
  5. Linux虚拟文件系统
  6. CSS 之怀疑自己的审美 1 （Day49）
  7. POJ-10031004
  8. SecureCRT登录本地cygwin。
  9. win7 优化后的问题
  10. 【算法导论】第24章迪杰斯特拉算法