일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- Git
- darkmode
- Python
- error
- Swift
- 개발자
- iOS16
- FLUTTER
- Xcode
- rxswift
- window
- mac
- Notification
- 웹뷰
- MacOS
- github
- UIButton
- 한글
- Apple
- Archive
- appstore
- JPA
- Code
- Session
- Realm
- SwiftUI
- IOS
- view
- Firebase
- stack
- Today
- Total
EEYatHo 앱 깎는 이야기
Swift ) SnapKit Animation ( AutoLayout, Animate ) 본문
Swift ) SnapKit Animation ( AutoLayout, Animate )
EEYatHo 2021. 2. 18. 23:55
디자인팀의 요구사항은, 올라왔다가 내려가는 Toast.
Frame으로 Animate하는거야 뭐 아주 쉽다.
그런데 Label의 줄 수에 따라 동적으로 높이가 변하는 Toast.
때문에 FrameBasedLayout이 아닌, AutoLayout을 사용한다.
AutoLayout Animate로 리서칭을 하였는데,
animate 밖에서 Constraint 수정하고, animate 안에서 layoutIfNeeded() 하기?
잘 안되면 setNeedsUpdateConstraints() 하기?
다 필요없다
animate 함수 안에 아래처럼만 해주면 된다.
갓갓 SnapKit..
( 진작에 SnapKit Animate로 검색할걸 ㅇㄴㅁㄹㄴㅁㅇㅁㄹㅁㄴ )
UIView.animate(withDuration: 1.0, delay: 0, options: .curveEaseOut, animations: {
// 위로 올리기
container.snp.updateConstraints {
$0.bottom.equalToSuperview().offset(-20)
}
container.superview?.layoutIfNeeded()
}
[ ToastManager의 애니메이션 부분 ]
UIView.animate(withDuration: 0.1, delay: 0, animations: {
// 일단 밑에 레이아웃하기 위한 버퍼 애니메이션
container.alpha = 1
},
completion: { _ in
UIView.animate(withDuration: 1.0, delay: 0, options: .curveEaseOut, animations: {
// 위로 올리기
container.snp.updateConstraints {
$0.bottom.equalToSuperview().offset(-20)
}
container.superview?.layoutIfNeeded()
},
completion: { _ in
UIView.animate(withDuration: 1.0, delay: 2, options: .curveEaseOut, animations: {
// 밑으로 내리기
container.snp.updateConstraints {
$0.bottom.equalToSuperview().offset(100)
}
container.superview?.layoutIfNeeded()
},
completion: { _ in
container.removeFromSuperview()
})
})
})
[ 간략한 설명 시작 ]
3단 animate함수이다.
3개의 animate 모두 container라는 Toast 뷰를 움직인다.
1. 첫번째 animate
container.snp.makeConstraints {
$0.trailing.leading.equalToSuperview().inset(sideMargin)
$0.bottom.equalToSuperview().offset(100)
}
처음에 레이아웃 하는 과정이 필요한데,
( 처음에 레이아웃하고, 그다음에 올리고 내려야하니까. )
이 코드를 실행한 직후, AutoLayout을 설정해 줬다고 해서,
그 순간에 바로 뷰가 레이아웃 되는게 아니다.
( debug로 bounds이나 frame 찍어보면 알 수 있다. )
다른 뷰컨에서 아무때나 호출해서 사용하는 ToastManager 특성상,
Life Cycle 함수들을 사용할 수 없기 때문에,
animate를 활용해서 레이아웃 했다.
그게 첫번째 애니메이션의 역할이다.
첫번째 애니메이션이 실행되면서,
container은 화면 아래 안보이는 곳에 레이아웃 된다.
2. 두번째 animate
container을 위로 올린다
3. 세번째 animate
container을 내린다
-끝-
delay 매개변수.. 직관으로는 "애니메이션이 완료된 후 얼마나 유지할거냐?" 인줄 알았는데..
"얼마나 있다가 애니메이션을 실행할거냐?" 였다..
저거 때문에 한 30분 더 버렸네 ㄹㅁㄴㅇㄴㅁ
'iOS, Swift > Tip, Bug, Swift Error' 카테고리의 다른 글
Swift ) Background Foreground 감지 (0) | 2021.03.02 |
---|---|
Swift ) 내 앱 설정화면으로 이동하기 - EEYatHo iOS (0) | 2021.02.26 |
Swift ) UIButton 클릭시, 회색 되는거 없애기 - EEYatHo iOS (0) | 2021.02.25 |
Swift ) 네비게이션 바, 탭바 위에 팝업 띄우기 - EEYatHo iOS (0) | 2021.02.19 |
Swift ) iOS animate spring 효과넣기 - EEYatHo iOS (0) | 2021.02.19 |