iOS变形Transform与Transform3D

作者: yuezmz | 来源:发表于2016-12-23 21:37 被阅读209次

1.Transform

iOS中通过修改view视图对象的transform属性就能完成对view的位移,缩放,旋转这样的2D变化
transform属性的类型CGAffineTransform(放射变换)是一种结构体类型

包含了6个可变的值和3个定值,组成了3*3的矩阵
a,b,0 c,d,0 tx,ty,1
修改了6个值中的某几个,就可以实现变形,实际中不会手动修改6个值,可以借助系统提供的API实现数值的改变
rotation:旋转
scale:缩放
translation:位移

使用带Make的函数运算时都是基于没有变形前的那个状态

CGAffineTransformMakeRotation()
CGaffineTransformMakeScale()
CGAffineTransformMakeTranslation()

下面的函数是在每次变化的Transform属性基础之上继续改变

CGAffineTransformRotation()
CGAffineTranformScale()
CGAffineTransformTranslation()

CGAffineTransformInvert()

CGAffineTransformInvert()得到相反的效果

CGAffineTransformIdentity

常量CGAffineTransformIdentity 记录矩阵没有变化的最初6个值, 如果将此常量赋值给tansform属性的话,那么视图发生过的所有变形效果都会消失,回到最初状态
如: _views.transform = CGAffineTransformIdentity;

self.views.transform = CGAffineTransformRotate(self.views.transform, M_PI_4);
self.views.transform = CGAffineTransformScale(self.views.transform, 1.1, 1.1);
self.views.transform = CGAffineTransformTranslate(self.views.transform, 2, 3);

需要注意的是Rotate旋转后视图坐标系也会跟着旋转的

transform.gif

2.Transform3D

在iOS中还可以通过对视图对象view的图层属性layertransform属性做修改来完成一些3D效果
layertransform属性的类型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(); };
3D矩阵详解

在每次变化的Transform属性基础之上继续变换

CATransform3DRotate(CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
CATransform3DScale(CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz)
CATransform3DTranslate(CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz)

带Make 根据初始值转换

CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)
CATransform3DMakeTranslation(CGFloat tx, CGFloat ty, CGFloat tz)
transform3D.gif

相关文章

  • iOS变形Transform与Transform3D

    1.Transform iOS中通过修改view视图对象的transform属性就能完成对view的位移,缩放,旋...

  • Swift-transform、transform3D属性

    transform 基于View的形变 transform3D 基于View的形变 基于layer的形变

  • 网易云课堂前端学习-css-变形-transform

    变形包括2d变形和3d变形 transform2D变形 transform(none| +),可以写多个方法一起但...

  • CSS3倒影、渐变

    倒影 倒影+渐变 变形transform transform:rotate();rotate(angle) 定义 ...

  • css3动画

    transform(变形),transition(过渡),animation(动画)一、transform:直接改...

  • CSS3 变形、过渡、动画

    transform 变形 transform-origin 参照原点 transform-style 指定是否在三...

  • transform(变形)

    transform(变形) CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS...

  • --- > css3-变形

    transform(变形) CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS...

  • transform变形

    CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS3中transform主要包...

  • transform 变形

    transform: rotate(360deg,180deg) 旋转 x y 单位度transf...

网友评论

    本文标题:iOS变形Transform与Transform3D

    本文链接:https://www.haomeiwen.com/subject/hxxlvttx.html