iOS CGAffineTransform 사용하기

 

사용할 CGAffineTransform는 구조체입니다.

(https://developer.apple.com/documentation/coregraphics/cgaffinetransform)

 

 

가장 큰 특징은 뷰의 프레임을 계산하지 않고 CGAffineTransform을 사용해 2D 그래픽을 그릴 수 있습니다.

간단하게 사용 가능하기 때문에 자주 사용하곤 합니다. 

 

CGAffineTransform에서 사용되는 아핀 변환 행렬은 2D 그래픽을 그리는데 사용되는 행렬입니다.

 

또한 아핀 변환 행렬은 객체를 회전, 크기 조절, 변환 또는 기울기를 위해 사용됩니다.

 

아핀 변환을 직접 생성할 필요는 없고 구조체에 있는 함수를 호출해 뷰를 이동(translate), 조절(scale), 회전(rotate)합니다. 

 

• Scale
• Rotate
• Translate

 

어떻게 사용하는지 살펴봅시다.

 

 

사용할 myView를 생성해줍니다. 

 

 

CGAffineTransform 사용하기

 

 

#1 scale 사용 

뷰의 넓이와 높이를 두 배로 증가시킵니다.

 

#2 rotationAngle 사용

뷰를 180도로 회전시킵니다.

 

#3 translation 사용

뷰의 위치를 X 200 Y 200으로 움직입니다.

 

 

 

위와 같이 CGAffineTransform에서 원하는 함수를 사용해서 myView에 애니메이션 효과를 적용합니다. 

 

 

위에 작업을 한 번에 실행하려면 concatenating을 사용해 합쳐줍니다.

 

concatenating은 기존 두 개의 아핀 변환을 결합하여 구성된 아핀 변환 행렬을 반환합니다.

 

여러 가지를 결합한 것을 combine에 넣고 combine을 myView의 transform에 선언해주었습니다.

 

 

 

 

결과로 myView는 2초 동안 회색으로 배경색을 변경하고 2배로 커지고 180도 회전하고 200 200좌표로 움직이게 됩니다.

 

 

 

위와 동일한 효과에 completion을 추가했습니다.

 

적용된 모든 변환을 제거하는 방법은 identity를 설정해줍니다.

 

 

 

결과로 2초 동안 회색으로 배경색을 변경하고 2배로 커지고 180도 회전하고 200 200좌표로 옮겨진 후, CGAffineTransform.identity를 호출해 원 상태로 복구합니다. 

 

(위 예시는 해당 부분은 버전이 업되면서 동작성이 달라졌습니다)
(https://hyerios.tistory.com/275) 참고

 

 

*추가*

 

 collectionView의 cell에 CGAffineTransform 사용하기 

 

 

 

 

 

 

 

 

 

 

저는 각 각의 셀을 접근할 때 즉 cellForItemAt에서 transform(myCell: ) 메소드를 불러줍니다.

 

CGAffineTransform의 scale을 사용해 각 각의 셀에 대해서 0.6으로 줄어든 후 identity로 원상 복귀해주어 위와 같은 효과를 낼 수 있습니다.  

 

 

*추가*

 

스택뷰를 사용해 두개의 라벨을 추가해 애니메이션을 적용했습니다. 

 

 

 

 

 

titleLabel의 transform을 변경해준 후 completion에서 알파값을 0으로 주고 위로 올려줍니다.

이런식으로 UIView의 animate메소드와 CGAffineTransform을 같이 사용하면 최고..ㅎ

PS: 맨 마지막 이미지에서 클로저 내에 [weak self]는 작성해 줄 필요가 없습니다.

UIView의 animate함수는 global function이라 클로저내에서 값을 캡쳐하지 않습니다.