[iOS/UI]탭바 아이템 눌렀을 때 애니메이션 넣기 (UITabBarItem Animation)

안녕하세요 Foma 입니다!!!

 

오늘 알아볼 건 탭바를 탭했을 때 이미지가 스프링처럼 커졌다 작아졌다하는 애니메이션을 적용해볼거에요.

 

그럼 바로 시작하겠습니다.

Xcode

---

 

우선 탭바 컨트롤러를 만들어주세요.

 

override된 didSelect(탭바아이템 선택했을시) 메소드를 써줍니다.

 

아래 사진과 같이 안에 코드를 붙여넣습니다.(인덱스를 찾아내는 코드)

그 다음 애니메이션 함수를 따로 구현해줍니다.

마지막으로 didSelect했을 때 performSpringAnimation함수에 imageView를 인자값으로 넣어준 뒤 실행해줍니다.

StoryBoard

---

스토리보드로 이동하셔서 탭바컨트롤러를 만들고 각 아이템에 이미지를 넣어줍니다. (저렇게 원본 그대로의 이미지를 추가하시고 싶으면

여기를 참고해주세요)

반드시 클래스 이름에 아까 만들어주셨던 탭바컨트롤러랑 같은 이름을 써야합니다.

GIF

---

실행해보면 다음과 같이 아이템을 탭했을 때 튀어오르는 듯한 애니메이션이 적용된걸 볼 수 있습니다!!

 

Source Code

---

전체소스코드

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

import UIKit   class TabBarController: UITabBarController {          override func viewDidLoad() {         super.viewDidLoad()              }     override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {                  guard let idx = tabBar.items?.firstIndex(of: item), tabBar.subviews.count > idx + 1, let imageView = tabBar.subviews[idx + 1].subviews.compactMap ({ $0 as? UIImageView }).first else {                   return               }                  performSpringAnimation(imgView: imageView)     }          //이미지뷰에 스프링 애니메이션 적용하기     func performSpringAnimation(imgView: UIImageView) {                  UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {                          imgView.transform = CGAffineTransform.init(scaleX: 1.4, y: 1.4)                          UIView.animate(withDuration: 0.5, delay: 0.2, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {                 imgView.transform = CGAffineTransform.init(scaleX: 1, y: 1)             }) { (flag) in             }         }) { (flag) in                      }     }      } Colored by Color Scripter