[ swift ] 영화앱 2. 좋아요버튼 애니메이션 구현하기

sonny·2024년 12월 17일

TIL

목록 보기

74/133

오늘은 이 헛헛한 좋아요 버튼을 눌렀을 때 클릭애니메이션을 구현해보려고 한다.

버튼액션의 경우 controller가 담당하는 부분이라서 UI만 모아져있는 view에서 작업하는게 아닌

MovieDetailViewController에서 작업해야한다.

    // 버튼 액션만 따로 정리
    private func buttonActions() {
        movieDetailView.likeButton.addTarget(self, action: #selector(likeButtonTapped(_:)), for: .touchUpInside)
    }

앞으로 공유버튼과 예매하기 버튼, 예고편 재생버튼 등 액션을 정리해야하니 따로 메서드를 정의해주고

    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        buttonActions() // 버튼 액션
    }

따로 이렇게 넣어주면 깔꼼하다.

애니메이션 부터 설정해보자

    // 버튼 클릭 애니메이션
    private func animateButtonPress(_ button: UIButton) {
        UIView.animate(withDuration: 0.1,
                       animations: {
            // 눌렸을 때 크기가 작아짐
            button.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
        },
                       completion: { _ in
            // 애니메이션 완료 후 원래 크기로 돌아옴
            UIView.animate(withDuration: 0.1) {
                button.transform = CGAffineTransform.identity
            }
        })
    }

animateButtonPress 라는 메서드를 하나 만들어주었다.

이 메서드는 버튼을 눌렀을 때 호출되어서 UIButton 타입의 button을 파라미터로 받을 예정이다.

그리고 버튼을 눌렀을 때 애니메이션을 통해 크기가 작아졌다가 원래 크기로 돌아오는 효과를 넣었고

눌렀음을 인지할 수 있도록 했다. 각 부분을 설명하자면,

animate

UIView.animate(withDuration:animations:completion:)는 애니메이션을 수행하는 메서드다.

withDuration: 0.1: 애니메이션의 지속 시간을 0.1초로 설정해주고,
animations: 애니메이션이 진행될 동안 수행할 동작을 지정하는데 여기서는 버튼의 크기를 줄이는 애니메이션을 정의한다.
- button.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
  - 버튼의 transform 속성을 사용해 크기를 변경해준다.
  - CGAffineTransform(scaleX: 0.9, y: 0.9)는 버튼의 가로와 세로 크기를 각각 90%로 축소한다 라는 것이고그로 인해 버튼이 눌렸을 때 버튼의 크기가 10% 작아지는 효과를 주게 된다.
completion: 애니메이션이 끝난 후 실행되는 클로저다.
- UIView.animate(withDuration: 0.1)로 0.1초 내에 버튼의 크기를 원래 크기로 돌아가게 애니메이션을 추가한다.
- button.transform = CGAffineTransform.identity는 버튼의 transform을 초기 상태로 되돌린다.
  여기서 CGAffineTransform.identity는 기본 CGAffineTransform 값을 의미하는데,
  크기나 회전 변형이 없음을 나타낸다.
  쉽게 말하면 그냥 버튼을 아무런 변형 없이 원래 상태로 복원하는 역할인 것이다.

이렇게 하면 버튼을 눌렀을 때, 버튼의 크기가 10% 줄어든 후, 0.1초 뒤에 원래 크기로 돌아오는 애니메이션을 진행하게 되고,

이 애니메이션은 두 번의 UIView.animate를 사용해 순차적으로 실행되는 것을 볼 수 있다.

첫 번째는 크기를 줄이는 애니메이션, 두 번째는 원래 크기로 되돌리는 애니메이션이다.

버튼 탭 할 때 컬러 변경하기

그렇다면 이제 색상을 변경해줄 차례인데,

위에서 addTarget으로 likeButtonTapped을 지정해 주었으니 코드를 작성해봤다.

 @objc private func likeButtonTapped(_ sender: UIButton) {
        animateButtonPress(sender)
        
        // 버튼 색상 변경
        if sender.titleColor(for: .normal) == .lightGray {
            sender.setTitleColor(.systemRed, for: .normal)
            sender.layer.borderColor = UIColor.red.cgColor
        } else {
            sender.setTitleColor(.lightGray, for: .normal)
            sender.layer.borderColor = UIColor.lightGray.cgColor
        }
    }

_ sender의 경우 계산기를 만들 때도 썼는데, UIButton는 UIButton 타입의 sender 매개변수를 받아오기 때문에

클릭된 버튼에 대한 정보를 처리할 수 있게 해준다.

그래서 animateButtonPress(sender)로 아까 만든 버튼이 클릭될 때 애니메이션 효과를 넣어준다.

코드 설명

sender.titleColor(for: .normal)
- titleColor(for:)는 버튼의 제목 텍스트 색을 가져오는 메서드 인데, .normal은 버튼이 일반 상태일 때의 색을 의미한다.
- 이 코드에서는 버튼의 현재 텍스트 색상이 .lightGray인지 확인하고 있는 것이다.
if sender.titleColor(for: .normal) == .lightGray
- 버튼의 텍스트 색상이 lightGray일 경우(아직 좋아요를 누르지 않은 상태), 아래 코드를 실행해서 색을 변경한다.
- sender.setTitleColor(.systemRed, for: .normal)는 버튼의 텍스트 색을 systemRed로 변경한다.
- sender.layer.borderColor = UIColor.red.cgColor는 버튼의 타이틀 글자 뿐만 아니라 테두리 색도 빨간색으로 변경해야해서 추가해야한다.
else
- 버튼의 텍스트 색상이 lightGray가 아니라면(이미 좋아요를 클릭한 상태라면), 버튼의 색을 다시 원래 상태로 되돌린다.
- sender.setTitleColor(.lightGray, for: .normal)는 버튼의 텍스트 색을 lightGray로 변경하고
- sender.layer.borderColor = UIColor.lightGray.cgColor를 통해 마찬가지로 버튼의 테두리 색도 회색으로 되돌려준다.