본문 바로가기

Project/MovieClip

⭐️ 버튼의 애니메이션 효과 주기

 

 

✅ 애니메이션 개선 코드 (Spring 애니메이션 추가)

 

1️⃣ Spring 애니메이션 적용

  • usingSpringWithDamping: 0.6, initialSpringVelocity: 0.8
    → 버튼이 커졌다가 다시 제자리로 돌아오는 스프링 효과 추가 (좀 더 부드러운 효과)

2️⃣ 크기 차이를 명확하게 조절

  • scaleX: 1.1 → scaleX: 1.15
    → 버튼을 더 눈에 띄게 커지도록 변경하여 눌린 느낌이 확실하게 보이도록 변경

3️⃣ 버튼 비활성화 시 alpha 값을 낮춤

  • alpha = 0.7 → alpha = 0.5
    → 비활성화된 버튼이 더 흐릿해지면서, 활성화된 버튼이 더욱 강조됨
private func updateButtonState() {
    UIView.animate(withDuration: 0.3, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: 0.8, options: [.curveEaseInOut]) { [self] in
        
        switch creditType {
        case .movie:
            // ✅ 영화 버튼 활성화
            calledMovieCreditButton.configuration?.baseBackgroundColor = .systemBlue
            calledMovieCreditButton.alpha = 1.0
            calledMovieCreditButton.transform = CGAffineTransform(scaleX: 1.15, y: 1.15) // 💡 더 커지도록 변경
            
            // ✅ TV 버튼 비활성화
            calledTVCreditButton.configuration?.baseBackgroundColor = .systemGray
            calledTVCreditButton.alpha = 0.5
            calledTVCreditButton.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
            
        case .tv:
            // ✅ TV 버튼 활성화
            calledTVCreditButton.configuration?.baseBackgroundColor = .systemBlue
            calledTVCreditButton.alpha = 1.0
            calledTVCreditButton.transform = CGAffineTransform(scaleX: 1.15, y: 1.15) // 💡 더 커지도록 변경
            
            // ✅ 영화 버튼 비활성화
            calledMovieCreditButton.configuration?.baseBackgroundColor = .systemGray
            calledMovieCreditButton.alpha = 0.5
            calledMovieCreditButton.transform = CGAffineTransform(scaleX: 1.0, y: 1.0)
        }
    }
}

 

📌 만약 더 빠르게 변하게 하고 싶다면?

UIView.animate(withDuration: 0.25, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 1.0, options: [.curveEaseInOut]) { [self] in

 

  • damping 값(0.6 → 0.5) 을 줄이면 → 스프링 효과가 더 강하게 튀는 느낌
  • velocity 값(0.8 → 1.0) 을 높이면 → 애니메이션 속도가 더 빠르게 시작됨