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

时间: 2024-10-05 05:50:27

CATransform3D 特效详解的相关文章

CATransform3D iOS动画特效详解

关于图层的几个坐标系. 对于ios来说,坐标系的(0,0)点在左上角,就是越往下,Y值越大.越往右,X值越大. 一个图层的frame,它是position,bounds,anchorPoint和transform属性的一部分. 设置一个新的frame将会相应的改变图层的position和bounds,但是frame本身并没有保存. position:是一个CGPoint值,它指定图层相当于它父图层的位置,该值基于父图层的坐标系. bounds:是一个 CGRect值,指定图层的大小(bounds

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

安卓系统特效相关文件:  存在于:framework-res.apk   反编译后的\framework-res\res\anim文件夹内!anim文件夹下所有的文件都是特效文件原理  反编译framework-res.apk 替换anim文件夹下的文件达到修改特效的目的!然后再重建framework-res.apk替换到手机,修改权限重启 特效文件名称.xml 对应的相关特效 fade_out 最近任务  下滑状态栏的日期 移除 fade_in 最近任务  下滑状态栏的日期 移除 status

css3特效详解

好吧,CSS3 3D transform变换,不过如此! 这篇文章发布于 2012年09月7日,星期五,01:05,归类于 css相关. 阅读 408042 次, 今日 34 次 一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~ 看看下图女帝的动作以及神情,就可以知道名字带D的家伙的厉害! 最近折腾iPad的一些东西,有一些3D效果的交互.有

CSS3 线性渐变(linear-gradient)特效详解

在以前,渐变效果和阴影.圆角效果一样都是做成图片,直接编写  CSS 代码就可以实现.现在的CSS3线性渐变(linear-gradient)技术也可以实现这样的效果喽! CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主要有 Mozilla(Firefox,Flock等).WebKi

Android Animation动画详解(二): 组合动画特效

前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一番,然后再过来跟着我一起学习如何把简单的动画效果组合在一起,做出比较酷炫的动画特效吧. 一. 动画的续播 如题,大家想想,如果一个页面上包含了许多动画,这些动画要求按顺序播放,即一个动画播放完成后,继续播放另一个动画,使得这些动画具有连贯性.那该如何实现呢? 有开发经验或者是逻辑思维的人肯定会想,对

Unity之粒子特效参数详解——上

如需转载请保留本文链接. Unity版本号:5.5.0 参考书籍:<Unity5.x从入门到精通> 参考资料:Unity官方API 参考文章: 1.http://jingyan.baidu.com/article/380abd0a77c5041d90192c19.html 2.http://www.cnblogs.com/qinghuaideren/p/3597666.html?utm_source=tuicool&utm_medium=referral 目标:做出一个篝火效果,最终结

Unity之粒子特效参数详解——中

接<Unity之粒子特效参数详解--上>继续写,Unity之粒子特效参数详解--上链接为:http://www.cnblogs.com/yikecaidechengzhangshi/p/6991750.html 步骤二:参数设置如图 Material可以自己找一个火焰贴图,Shader参数改为:Pariticles-Additive,参图: 剩下的明天再写,今天先这样,明天回来再补充修改.

CSS3动画特效——transform详解

CSS3动画特效——transform详解 公共css .common{ width:100px; height:100px; margin:20px auto; background-color:#75C934; text-align:center; line-height:100px; font-size:18px; } 1)transform:rotate(value); 元素旋转 value为旋转度数 默认顺时针旋转. value若为负值则逆时针旋转. .box{ /*过渡效果*/ -w

各种音视频编解码学习详解

各种音视频编解码学习详解 媒体业务是网络的主要业务之间.尤其移动互联网业务的兴起,在运营商和应用开发商中,媒体业务份量极重,其中媒体的编解码服务涉及需求分析.应用开发.释放license收费等等.最近因为项目的关系,需要理清媒体的codec,比较搞的是,在豆丁网上看运营商的规范 标准,同一运营商同样的业务在不同文档中不同的要求,而且有些要求就我看来应当是历史的延续,也就是现在已经很少采用了.所以豆丁上看不出所以然,从 wiki上查.中文的wiki信息量有限,很短,而wiki的英文内容内多,删减版