CGAffineTransform介紹
概述
CGAffineTransform是一個(gè)用于處理形變的類(lèi),其可以改變控件的平移、縮放、旋轉(zhuǎn)等,其坐標(biāo)系統(tǒng)采用的是二維坐標(biāo)系,即向右為x軸正方向,向下為y軸正方向
在UIView中有一個(gè)transform屬性便是專(zhuān)門(mén)用來(lái)控制形變的,其使用方法如下
樣例素材
在介紹UIView形變的過(guò)程中,我們會(huì)使用一個(gè)UIImageView圖片為例,對(duì)各動(dòng)畫(huà)效果進(jìn)行演示
@property (nonatomic, strong) UIImageView *demoImageView;
- (void)viewDidLoad
{
[super viewDidLoad];
self.demoImageView = [[UIImageView alloc] initWithFrame:CGRectMake(20, 20, [[UIScreen mainScreen] bounds].size.width-40, [[UIScreen mainScreen] bounds].size.height-40)];
self.demoImageView.image = [UIImage imageNamed:@"demo"];
[self.view addSubview:self.demoImageView];
}
方法介紹
- CGAffineTransformMakeTranslation實(shí)現(xiàn)以初始位置為基準(zhǔn),在x軸方向上平移x單位,在y軸方向上平移y單位
// 格式
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
// 樣例
self.demoImageView.transform = CGAffineTransformMakeTranslation(100, 100);
注: 當(dāng)tx為正值時(shí),會(huì)向x軸正方向平移,反之,則向x軸負(fù)方向平移;當(dāng)ty為正值時(shí),會(huì)向y軸正方向平移,反之,則向y軸負(fù)方向平移
- CGAffineTransformMakeScale實(shí)現(xiàn)以初始位置為基準(zhǔn),在x軸方向上縮放x倍,在y軸方向上縮放y倍
// 格式
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
// 樣例
self.demoImageView.transform = CGAffineTransformMakeScale(2, 0.5);
注: 當(dāng)sx為正值時(shí),會(huì)在x軸方向上縮放x倍,反之,則在縮放的基礎(chǔ)上沿著豎直線翻轉(zhuǎn);當(dāng)sy為正值時(shí),會(huì)在y軸方向上縮放y倍,反之,則在縮放的基礎(chǔ)上沿著水平線翻轉(zhuǎn)
- CGAffineTransformMakeRotation實(shí)現(xiàn)以初始位置為基準(zhǔn),將坐標(biāo)系統(tǒng)
逆時(shí)針旋轉(zhuǎn)angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)
// 格式
CGAffineTransformMakeRotation(CGFloat angle)
// 樣例
self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5);
注1: 當(dāng)angle為正值時(shí),
逆時(shí)針旋轉(zhuǎn)坐標(biāo)系統(tǒng),反之順時(shí)針旋轉(zhuǎn)坐標(biāo)系統(tǒng)
注2:
逆時(shí)針旋轉(zhuǎn)坐標(biāo)系統(tǒng)的表現(xiàn)形式為對(duì)控件進(jìn)行順時(shí)針旋轉(zhuǎn)
- CGAffineTransformTranslate實(shí)現(xiàn)以一個(gè)已經(jīng)存在的形變?yōu)榛鶞?zhǔn),在x軸方向上平移x單位,在y軸方向上平移y單位
// 格式
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
// 樣例
CGAffineTransform transform = CGAffineTransformMakeTranslation(50, 50);
self.demoImageView.transform = CGAffineTransformTranslate(transform, 50, 50);
- CGAffineTransformScale實(shí)現(xiàn)以一個(gè)已經(jīng)存在的形變?yōu)榛鶞?zhǔn),在x軸方向上縮放x倍,在y軸方向上縮放y倍
// 格式
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
// 樣例
CGAffineTransform transform = CGAffineTransformMakeScale(2, 0.5);
self.demoImageView.transform = CGAffineTransformScale(transform, 2, 1);
- CGAffineTransformRotate實(shí)現(xiàn)以一個(gè)已經(jīng)存在的形變?yōu)榛鶞?zhǔn),將坐標(biāo)系統(tǒng)
逆時(shí)針旋轉(zhuǎn)angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)
// 格式
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
// 樣例
CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI*0.25);
self.demoImageView.transform = CGAffineTransformRotate(transform, M_PI*0.25);
- 特殊地,transform屬性默認(rèn)值為CGAffineTransformIdentity,可以在形變之后設(shè)置該值以還原到最初狀態(tài)
// 樣例
self.demoImageView.transform = CGAffineTransformIdentity;
CGAffineTransform原理
CGAffineTransform形變是通過(guò)"仿射變換矩陣"來(lái)控制的,其中平移是矩陣相加,旋轉(zhuǎn)與縮放則是矩陣相乘,為了合并矩陣運(yùn)算中的加法和乘法,引入了齊次坐標(biāo)的概念,它提供了用矩陣運(yùn)算把二維、三維甚至高維空間中的一個(gè)點(diǎn)集從一個(gè)坐標(biāo)系變換到另一個(gè)坐標(biāo)系的有效方法.CGAffineTransform形變就是把二維形變使用一個(gè)三維矩陣來(lái)表示,其中第三列總是(0,0,1),形變通過(guò)前兩列來(lái)控制,系統(tǒng)提供了CGAffineTransformMake結(jié)構(gòu)體來(lái)控制形變
// 格式
CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)
該三維變換矩陣如下
通過(guò)變換矩陣左乘向量,將空間中的一個(gè)點(diǎn)集從一個(gè)坐標(biāo)系變換到另一個(gè)坐標(biāo)系中,計(jì)算方式如下
由此可知,其中tx用來(lái)控制在x軸方向上的平移,ty用來(lái)控制在y軸方向上的平移;a用來(lái)控制在x軸方向上的縮放,d用來(lái)控制在y軸方向上的縮放;abcd共同控制旋轉(zhuǎn)
- 平移CGAffineTransformMakeTranslation原理
self.demoImageView.transform = CGAffineTransformMakeTranslation(100, 100);
self.demoImageView.transform = CGAffineTransformMake(1, 0, 0, 1, 100, 100);
- 縮放CGAffineTransformMakeScale原理
self.demoImageView.transform = CGAffineTransformMakeScale(2, 0.5);
self.demoImageView.transform = CGAffineTransformMake(2, 0, 0, 0.5, 0, 0);
- 旋轉(zhuǎn)CGAffineTransformMakeRotation原理
self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5);
self.demoImageView.transform = CGAffineTransformMake(cos(M_PI * 0.5), sin(M_PI * 0.5), -sin(M_PI * 0.5), cos(M_PI * 0.5), 0, 0);
- 初始狀態(tài)CGAffineTransformIdentity原理
self.demoImageView.transform = CGAffineTransformIdentity;
self.demoImageView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);
