一、 Transform 二维变换
UIView有一个transform属性,CGAffineTransform 可以操控二维平面内控件的平移、旋转和缩放。
这三种类型的图形变换可以使用 CGAffineTransformMake(<#CGFloat a#>, <#CGFloat b#>, <#CGFloat c#>, <#CGFloat d#>, <#CGFloat tx#>, <#CGFloat ty#>) 通过设置参数实现(其实为矩阵中的参数设置)。但iOS开发中,苹果为我们提供了更加方便的接口,如下:
1、平移
/*
CGAffineTransformMakeTranslation:
以初始位置为基准进行平移变换
CGAffineTransformTranslate:
实现以一个已经存在的形变为基准,在x轴方向上平移x单位,在y轴方向上平移y单位
初始化:
CGAffineTransform transform = CGAffineTransformIdentity;
CGAffineTransformIdentity是系统提供的一个常量,
The identity transform: [1 0 0 1 0 0] (和原图一样的transform)
*/
self.imgView.transform = CGAffineTransformMakeTranslation(100, 100);
self.imgView.transform = CGAffineTransformTranslate(CGAffineTransformIdentity, 100, 100);
// 在X、Y轴平移100也可以这样设置
self.imgView.transform = CGAffineTransformMake(1, 0, 0, 1, 100, 100);
2、旋转
CGAffineTransform transform = CGAffineTransformMakeRotation(-M_PI_2);
self.imgView.transform = CGAffineTransformRotate(transform, M_PI_2);
3、缩放
self.imgView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 2.0, 2.0);
self.imgView.transform = CGAffineTransformMakeScale(2.0, 2.0);
二、原理
了解仿射变换矩阵计算原理,回顾一下线性代数:
http://www2.edu-edu.com.cn/lesson_crs78/self/j_0022/soft/ch0605.html
参考文章:http://www.jianshu.com/p/6c09d138b31d
初始化: CGAffineTransform transform = CGAffineTransformIdentity;
CGAffineTransformIdentity是系统提供的一个常量,/* The identity transform: [ 1 0 0 1 0 0 ]. */(和原图一样的transform);
CGAffineTransform transform = CGAffineTransformMake(CGFloat a,CGFloat b,
CGFloat c,CGFloa td,CGFloat tx,CGFloat ty)
下面是原始的(默认的)transform
人后我们再来看它的计算公式:3 X 3矩阵合成得到(x`,y`,1)
矩阵算法公式:
X' 和 Y' 是我们转换后的目标坐标值,X、Y是已知原始位置的坐标值。
我们创建两个大小和位置一样的视图,保持背景视图恒定不变,并将上层的视图做伸缩变换:
NSLog(@"变换前坐标----> X:%f Y:%f W:%f H:%f", self.testView.frame.origin.x, self.testView.frame.origin.y, self.testView.frame.size.width, self.testView.frame.size.height);
[UIView animateWithDuration:2 animations:^{
self.testView.transform = CGAffineTransformMake(0.2, 0, 0, 1, 0, 0);
} completion:^(BOOL finished) {
NSLog(@"变换后坐标----> X:%f Y:%f W:%f H:%f", self.testView.frame.origin.x, self.testView.frame.origin.y, self.testView.frame.size.width, self.testView.frame.size.height);
}];
将设置的参数带入方程可得:
X' = 0.2*X
Y' = Y
所以该参数是将testView视图横向X轴伸缩为原来的0.2倍:
查看打印前后坐标:
只有宽度和X坐标点发生了变化。