[iOS] CGAffineTransform - 뷰 객체의 이동, 회전, 크기 조절

CGAffineTransform에 대해 알아보자.

 

CGAffineTransform은 앞에 CG를 보고 유추할 수 있는 것처럼, Core Graphics 프레임워크에 속한 구조체이다.

참고로 Affine Transform은 한국말로 직역하면 아핀 행렬이다.

 

정의

---

애플 공식 문서를 보면 CGAffineTransform은 다음과 같이 정의할 수 있다. 

2D 그래픽을 그리기 위한 아핀 변환 행렬로, 그래픽적으로 객체를 회전, 이동, 크기 조절, 기울기를 조절할 수 있다.
(An affine transformation matrix for use in drawing 2D graphics. An affine transformation matrix is used to rotate, scale, translate, or skew the objects you draw in a graphics context. )

 

아핀 행렬은 선형대수학에서 사용되는 개념이라고 하는데, 알면 좋지만 사용하는 데는 몰라도 상관없다.

간단히 "뷰 객체를 이동, 회전, 크기 조절을 해주는 함수를 가진 구조체"라고 이해하면 될 것 같다.

 

특징은 뷰의 프레임을 계산하지 않고 2D 그래픽을 간단하게 그릴 수 있다는 것이다.

 

함수 및 속성

---

대표적으로 3가지 생성자와 3가지 인스턴스 메소드가 있다. 그리고 한 개의 타입 프로퍼티가 있다.

3가지 생성자

• init(scaleX: CGFloat, y: CGFloat) : 사용자가 제공한 값만큼 크기를 조절하여 구성된 아핀 변환 행렬을 반환한다.
• init(translationX: CGFloat, y: CGFloat) : 사용자가 제공한 값만큼 이동하여 구성된 아핀 변환 행렬을 반환한다.
• init(rotationAngle: CGFloat)  :  사용자가 제공한 값만큼 회전하여 구성된 아핀 변환 행렬을 반환한다.

3가지 인스턴스 메소드

• func rotated(by: CGFloat) -> CGAffineTransform : 기존 아핀 변환을 회전하여 구성된 아핀 변환 행렬을 반환한다.
• func scaledBy(x: CGFloat, y: CGFloat) -> CGAffineTransform : 기존 아핀 변환을 크기 조절하여 구성된 아핀 변환 행렬을 반환한다
• func translatedBy(x: CGFloat, y: CGFloat) -> CGAffineTransform : 기존 아핀 변환을 이동하여 구성된 아핀 변환 행렬을 반환한다

1가지 타입 프로퍼티

• static var identity: CGAffineTransform : 아핀 변환 행렬으로 변환된 행렬을 원래 행렬로 복귀시킨다. (원상복구)

 

예시

---

다음과 같이 뷰를 만들어보자.

let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
let view = UIView(frame: rect)
view.backgroundColor = .green

초록 배경을 가진 (0, 0) 좌표의 사각형이 있다.

 

뷰의 이동

init(translationX: CGFloat, y: CGFloat) 를 이용해서 뷰를 이동해보자

rectView.transform = CGAffineTransform(translationX: 50, y: 100)

초록 사각형이 (0,0) 에서 x축으로 50만큼, y축으로 100만큼 이동한다.

 

뷰의 회전

init(rotationAngle: CGFloat) 를 이용해서 뷰를 회전해보자

rectView.transform = CGAffineTransform(rotationAngle: 70)

참고로 view의 transform에 새로운 CGAffineTransform 객체를 할당하면 이전에 적용한 것은 적용되지않는다. 그래서 초록 뷰가 다시 (0,0)으로 돌아왔다.

 

70이란 값을 회전 각도로 주니깐 70도만큼 초록색 뷰가 회전했다.

 

뷰의 크기 조절

init(rotationAngle: CGFloat)을 이용해서 크기를 조절해보자. 

rectView.transform = CGAffineTransform(scaleX: 3, y: 3)

초록색 뷰의 x 3만큼, y 3만큼 커진 것을 확인할 수 있다.

 

한번에 뷰의 이동, 회전, 크기 조절

동시에 세 메소드를 적용하여 한번에 뷰의 이동, 회전 크기를 조절할 수 있다.

rectView.transform = CGAffineTransform(translationX: 50, y: 50)
					.rotated(by: 70)
					.scaledBy(x: 2, y: 2)

 

초록색 뷰를 x축으로 50 y축으로 50만큼 이동한 다음 70도 회전하고, 2만큼 크기를 키운 것이다.

 

뷰의 원상복귀

CGAffineTransform을 적용한 뷰를 원상복귀 시켜보자

rectView.transform = CGAffineTransform.identity

 

결론

---

CGAffineTransform을 이용하면 뷰 객체를 이동, 회전, 크기 조절을 할 수 있다.

그리고 애니메이션에 적용하여 뷰 객체가 이동, 회전, 크기 조절되는 것을 동적으로 볼 수도 있다.