터치 애니메이션 구현하기

누르면 +에서 x로 빙글 돌아가요!

저 밑에 버튼은 누르면 빙글빙글 돌아가네요. 그래서 구현해봤습니다.
저는 일단 저 친구를 기본적으로 90도만큼 이미 돌아간 상태로 만들어뒀어요.
지금 .gif에서 보시다시피

버튼을 누른다 → + 표시에서 x로 움직인다 → 버튼을 다시 누른다 → x 표시에서 +로 움직인다

이런 루틴으로 진행되는 걸 알 수 있어요.

일단은 저 친구는 처음 뷰에 들어오면 -90도 돌아가 있지만,

// 왼쪽으로 90도 돌아가게 해주는 코드
transform = CGAffineTransform(rotationAngle: -(.pi/4))

이 코드를 통해서 원래 모습으로 돌려줄 겁니다.

UIView.animate(withDuration: 0.3, animations: {
     self.transform = .identity
})

하지만 UIView.animate가 내 생각대로 안된다고 느낄겁니다.

왜냐면 내가 뷰를 키자마자 0.3만에 쇽샥 돌아가버려서 우리는 이미 빙글 돌아버린 x 표시만 볼 수 있습니다...

그래서 어떻게 해줬는가?

DispatchQueue을 모셨습니다.

DispatchQueue.main.asyncAfter(deadline: .now() + 0.05, execute: {
   UIView.animate(withDuration: 0.3, animations: {
        self.transform = .identity
   })
})

DispatchQueue는 뷰가 켜지고 나서 0.05 후에 저 animate를 불러주기 때문에 우리는 돌아가는 x 표시를 볼 수 있게 됩니다.🌈

다시 원래대로 돌아가면서 dismiss시키는건요?

아마 animate와 dismiss를 함께 시키면 animate가 구동되는걸 보지도 못한채 차갑게 dismiss되는 뷰를 볼 수 있습니다.

UIView.animate(withDuration: 0.3, animations: {
       self.exitButton.transform = CGAffineTransform(rotationAngle: -(.pi/4))
})
DispatchQueue.main.asyncAfter(deadline: .now() + 0.15, execute: {
       self.dismiss(animated: true, completion: nil)
})

그렇기 때문에 일단 animate를 보여주고 0.15뒤에 dismiss될 수 있도록 DispatchQueue을 불러주시면 될 것 같습니다.