1.什么是transform?
transform主要用于形变,位移和旋转,可用于动画。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
CGAffineTransformMakeTranslation
2.transform常用的几种方法。
(1)CGAffineTransformMakeTranslation(a,b)
图片x坐标平移a的距离,y坐标平移b的距离。
(2)CGAffineTransformMakeScale(a,b)
图片水平方向放大x倍,竖直方向放大y倍
(3)CGAffineTransformMakeRotation(a)
图片按照锚点顺时针旋转a的角度。
以上三个方法都是在自身的transform上做一次相应的操作,比如我要旋转90°,调用一次方法三可以实现,但想要再一次旋转,旋转到180°,再调用一次方法三则不能实现,只能重新去更改方法三的旋转角度a的值。
(4)CGAffineTransformTranslation(view.transform,a,b)
(5)CGAffineTransformScale(view.transform,a,b)
(6)CGAffineTransformRotation(view.transform,a)
以上三个方法是在view.transform上调用,可多次调用,例如
_flowerImg.transform=CGAffineTransformRotate(_flowerImg.transform, M_PI/2)
这个多次调用便实现了图片90°,180°,270°的旋转。
3.自定义的平移变换
CGAffineTransformMake(a,b,c,d,tx,ty)
transform是一个结构体,其变量对应一个3*3的矩阵
如何通过这个齐次矩阵来变换坐标呢?
layer在屏幕中的坐标为(x,y),将其看成一个3*1的矩阵(x,y,1),
则变换后的坐标为:
(x' y' 1)= (x y 1) *
则根据上面的矩阵相乘得出:
x'=ax+cy+tx ;
y'=bx+dy+ty ;
(x',y')即为变换后的坐标。
看不懂为什么要用矩阵改变位移的可以参考下面的链接:
4.改变transform的值后,恢复到原来的形状
CGAffineTransformIdentity
将你想要恢复的layer.transform设置为上面的值,即可恢复没有形变之前的状态。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #00b1ff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #4bd157 }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 16.0px "Helvetica Neue"; color: #2f2f2f }
span.s1 { font: 12.0px Menlo; color: #657b83; background-color: #fdf6e3 }
span.s2 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #454545 }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #ffffff }
span.s1 { }
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #232323 }
span.s1 { }