📝 수업 내용 정리
- iOS에서 애니메이션을 사용하는 경우
- 시스템 상태를 나타내기 위해
- 메뉴 및 전환을 나타내기 위해
- 시각적인 피드백을 주기 위해 (ex. Face ID 해제 애니메이션, 탭바 인디케이터 이동)
- 애니메이션을 나타내기 위한 방법
- UIView의 animate (iOS 4~)
- Core Animation (iOS 10~)
layoutIfNeeded()- 애니메이션을 적용할 때 레이아웃의 업데이트를 반영하는 코드를 꼭 추가해야 함!
- setNeedsDisplay(), setNeedsLayout()도 있음
Standard Mission
- 지난 주 미션 결과물에 애니메이션 추가하기
- 2~3개 이상 추가해 주세요!
- 굳이 지난 주 프로젝트가 아니더라도 상관 없습니다 🙂
구현 화면
3주차에 만들었던 사칙연산 계산기 이미지에 애니메이션을 적용했다.
- 첫 번째 화면에서는 image view를 터치하면 애니메이션이 동작한다.
- 두 번째 화면이 나타나면 image view의 애니메이션이 실행되고, 계속 반복된다.
첫 번째 화면
override func viewDidLoad() {
super.viewDidLoad()
let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(didTapImageView))
imageView.addGestureRecognizer(tapGestureRecognizer)
}viewDidLoad에서 image view에 tap gesture recognizer를 등록한다. ⇒ image view의User Interaction Enabled속성을 체크해야 gesture recognizer가 정상적으로 실행된다!
@objc func didTapImageView() {
UIView.animate(withDuration: 0.25) {
let scale = CGAffineTransform(scaleX: 0.9, y: 0.9)
self.imageView.transform = scale
} completion: { finished in
UIView.animate(withDuration: 0.25) {
self.imageView.transform = .identity
}
}
}CGAffineTransform을 사용해서 image view의 크기를 0.9배로 설정한다..identity: 애니메이션 동작이 끝나면 원래 상태로 돌아간다.
두 번째 화면
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(animated)
animateImageView()
}
func animateImageView() {
UIView.animate(withDuration: 2, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 0.3, options: .repeat) {
let translation = CGAffineTransform(translationX: 0, y: 10)
self.imageView.transform = translation
}
}viewDidAppear에서 애니메이션과 관련된 함수를 실행한다.viewDidLoad에서 함수를 실행하면 애니메이션이 동작하지 않는다.viewDidAppear또는viewWillAppear에서 함수를 실행해야 하는 것 같다.
- 스프링처럼 통통 튕기는 애니메이션을 적용한다.
usingSpringWithDamping: 튕겨지는 정도 (0.0~1.0)initialSpringVelocity: 튕겨지는 속도 (0.0~1.0).repeat: 애니메이션을 반복하는 옵션CGAffineTransform를 사용해서 image view의 y좌표 값을 변경한다.
layoutIfNeeded()?
세미나에서는 layoutIfNeeded()를 반드시 호출해주어야 한다고 하셨는데, 내가 짠 코드에서는 layoutIfNeeded를 호출하지 않아도 애니메이션이 잘 동작했다.
CGAffineTransform 메소드는 auto layout의 constraint을 변경하는 것이 아니기 때문에 layoutIfNeeded를 호출하지 않아도 되는 것 같다.
그 외…
- iOS에서 view의 업데이트 main run loop에서 실행된다는데…. 스레드에서 제대로 공부 안 하고 넘어간 run loop가 또 나와서 궁금한 게 있으면 미리미리 공부를 해야된다는 걸 새삼 느꼈다 ^-ㅠ..
- 그래서 core animation이랑 레이아웃 변경 관련된 메소드들도 빨리 공부해놔야 할 것 같다. 파이팅……
- 참고 링크
나의 내일은 파래 🐳