看了一篇关于CATransform3D 特效详解   记录一下  以后慢慢看

关于图层的几个坐标系。

对于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)。

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

//

//

//

图层的几何变换。

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

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

转载于:https://www.cnblogs.com/LynnAIQ/p/5947959.html

CATransform3D 特效详解相关推荐

  1. CSS3动画特效详解

    大家都知道网页的3大组成部分,分别是结构,表现和行为.就像我们要盖一座房子,要地基要打的扎实,房子的架构要稳固,而我们网页当中的地基和架构就是Html,当我们盖好了房子,最终的美观度还是看我们的装修风 ...

  2. 扬州掼蛋游戏网JS特效详解

     WEB前端特效现在是满天飞,今天拿 扬州掼蛋游戏网 来举例说明jQuery 在现在的 Web 开发项目中扮演着重要角色,借助 jQuery 可以让网站有更好的可用性和用户体验,让访问者对网站留下 ...

  3. android camera 3d特效 详解与进阶

    1 概述 本篇主要讲解camera,这里的camera并不是照相相关的类,而是android.graphics.Camera,这个类中封装了一个matrix,不熟悉的同学可以看前面的文章来了解.and ...

  4. android系统特效详解和修改方法

    安卓系统特效相关文件:  存在于:framework-res.apk   反编译后的\framework-res\res\anim文件夹内! anim文件夹下所有的文件都是特效文件 原理  反编译fr ...

  5. 游戏特效详解!如何理解特效和判定一个特效的品质标准?

    导读:游戏特效看起来是一个很虚幻的东西,只能去发挥你无限的想象来表现它,然而它的形成也是如同大自然的规律一样,不是毫无关联,胡编瞎扯的. 特效从产生到消失每个环节都是息息相关.衔接紧密的.特效也有一个 ...

  6. 网页前端代码存档 - 【第三期】全屏banner图片切换特效详解

    十一长假plus已经结束  ,上班的第一周,大家都是什么心情呢,是不是还没有从放假的状态转换过来呢,需要调整一段时间 记得放假的时候,不知不觉就过去4天,当时感叹,哇靠,一下子就过去一半了啊,只能安慰 ...

  7. Android特效 五种Toast详解

    Toast是Android中用来显示显示信息的一种机制,和Dialog不一样的是,Toast是没有焦点的,而且Toast显示的时间有限,过一定的时间就会自动消失.而且Toast主要用于向用户显示提示消 ...

  8. android仿知乎按钮动效,Android仿知乎客户端关注和取消关注的按钮点击特效实现思路详解...

    先说明一下,项目代码已上传至github,不想看长篇大论的也可以先去下代码,对照代码,哪里不懂点哪里. 代码在这https://github.com/zgzczzw/ZHFollowButton 前几 ...

  9. web前端项目详解:OPPO首页进度条特效(定时轮播)

    web前端项目详解:OPP首页进度条特效(定时轮播) 知识点:布局结构分析,定位运用,页面兼容性问题,Jquery的基础运用(修改盒子样式,动画方法,简单算法,淡入淡出方法,定时器方法)代码结构 效果 ...

最新文章

  1. 使用php需要网络吗,使用php获取网络文件
  2. 2020-09-22C++学习笔记之引用1(1.引用(普通引用)2.引用做函数参数 3.引用的意义 4.引用本质5.引用结论 6.函数返回值是引用(引用当左值)7测试代码)
  3. 第一次 C语言课程设计
  4. poj(百练) 2743解题报告
  5. 【Python】蜗牛排序
  6. boost::math::students_t用法的测试程序
  7. 读书笔记(十)——python简单爬取企查查网企业信息,并以excel格式存储
  8. 英语笔记:写作:Nothing succeeds without a strong will
  9. 项目管理系统TOP10,好用的产品研发项目管理系统都在这里了
  10. 技术小卡系列之Eclipse 窗口说明
  11. Java数据库插入记录的语句-单引号-双引号values('username+'-'+password
  12. 海康设备通过SDK获取和设置设备网络参数
  13. 零基础用Android Studio实现简单的本地视频播放器
  14. 基于51单片机自动数字电压表PCF8591 TLC2543 TL548 proteus仿真汇编程序设计
  15. [期望DP] UOJ#311. 【UNR #2】积劳成疾
  16. ev3和python哪个好_python+lego ev3的心得总结 随时更新
  17. 2021年R1快开门式压力容器操作考试题库及R1快开门式压力容器操作考试APP
  18. 华为9月12日发布鸿蒙系统,华为自研系统“鸿蒙”新机或已大规模测试 最快今年9月发布...
  19. Ryu 安装过程中的问题
  20. vue+echarts+3D地图 制作大屏

热门文章

  1. 远程监控系统集成方案
  2. 震惊!!!CSS垂直居中竟然有这么多方法~
  3. sql for xml path用法
  4. 随心所欲学Java,起步-心理安慰
  5. (六)数据处理——录入、清洗、加工、描述
  6. iOS各个版本的新特性介绍
  7. iOS之 开发学习笔记-block
  8. 比较nio大体上优于io的方面
  9. 论PHP框架设计模式及MVC的缺陷
  10. python 3 json 序列化