iOS CGAffineTransform你了解多少？

CGAffineTransform介紹

概述

CGAffineTransform是一個用於處理形變的類,其可以改變控件的平移、縮放、旋轉等,其坐標系統采用的是二維坐標系,即向右為x軸正方向,向下為y軸正方向

在UIView中有一個transform屬性便是專門用來控制形變的,其使用方法如下

樣例素材

在介紹UIView形變的過程中,我們會使用一個UIImageView圖片為例,對各動畫效果進行演示

@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實現以初始位置為基准,在x軸方向上平移x單位,在y軸方向上平移y單位

// 格式 CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) // 樣例 self.demoImageView.transform = CGAffineTransformMakeTranslation(100, 100); 

注: 當tx為正值時,會向x軸正方向平移,反之,則向x軸負方向平移;當ty為正值時,會向y軸正方向平移,反之,則向y軸負方向平移

• CGAffineTransformMakeScale實現以初始位置為基准,在x軸方向上縮放x倍,在y軸方向上縮放y倍

// 格式 CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) // 樣例 self.demoImageView.transform = CGAffineTransformMakeScale(2, 0.5); 

注: 當sx為正值時,會在x軸方向上縮放x倍,反之,則在縮放的基礎上沿着豎直線翻轉;當sy為正值時,會在y軸方向上縮放y倍,反之,則在縮放的基礎上沿着水平線翻轉

• CGAffineTransformMakeRotation實現以初始位置為基准,將坐標系統逆時針旋轉angle弧度(弧度=π/180×角度,M_PI弧度代表180角度)

// 格式 CGAffineTransformMakeRotation(CGFloat angle) // 樣例 self.demoImageView.transform = CGAffineTransformMakeRotation(M_PI*0.5); 

注1: 當angle為正值時,逆時針旋轉坐標系統,反之順時針旋轉坐標系統

注2: 逆時針旋轉坐標系統的表現形式為對控件進行順時針旋轉

• CGAffineTransformTranslate實現以一個已經存在的形變為基准,在x軸方向上平移x單位,在y軸方向上平移y單位

// 格式 CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty) // 樣例 CGAffineTransform transform = CGAffineTransformMakeTranslation(50, 50); self.demoImageView.transform = CGAffineTransformTranslate(transform, 50, 50); 

• CGAffineTransformScale實現以一個已經存在的形變為基准,在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實現以一個已經存在的形變為基准,將坐標系統逆時針旋轉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屬性默認值為CGAffineTransformIdentity,可以在形變之后設置該值以還原到最初狀態

// 樣例 self.demoImageView.transform = CGAffineTransformIdentity; 

CGAffineTransform原理

CGAffineTransform形變是通過"仿射變換矩陣"來控制的,其中平移是矩陣相加,旋轉與縮放則是矩陣相乘,為了合並矩陣運算中的加法和乘法,引入了齊次坐標的概念,它提供了用矩陣運算把二維、三維甚至高維空間中的一個點集從一個坐標系變換到另一個坐標系的有效方法.CGAffineTransform形變就是把二維形變使用一個三維矩陣來表示,其中第三列總是(0,0,1),形變通過前兩列來控制,系統提供了CGAffineTransformMake結構體來控制形變

// 格式 CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty) 

該三維變換矩陣如下

 

 

通過變換矩陣左乘向量,將空間中的一個點集從一個坐標系變換到另一個坐標系中,計算方式如下

 

 

 

結果.png

由此可知,其中tx用來控制在x軸方向上的平移,ty用來控制在y軸方向上的平移;a用來控制在x軸方向上的縮放,d用來控制在y軸方向上的縮放;abcd共同控制旋轉

• 平移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); 

• 旋轉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); 

• 初始狀態CGAffineTransformIdentity原理

self.demoImageView.transform = CGAffineTransformIdentity; self.demoImageView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);

轉自：https://www.jianshu.com/p/ca7f9bc62429