문제
Color 로 덮여있는 화면을 탭하면 Lottie 뷰가 아래에서 나타나고,
Lottie 뷰를 다시 탭하면 아래로 사라지도록 했다.
뷰가 나타나는 건 잘되는데, 사라질 때 왜 애니메이션이 안먹을까?
원인 및 해결
ZStack {
Color.green.ignoresSafeArea()
if isAnimating {
CustomLottieView()
.transition(.move(edge: .bottom))
}
}
// @State isAnimating, onTapGesture 는 생략
위 코드처럼 구성이 되어있는데 .ignoresSafeArea() 를 풀어보면
removal transition 시, CustomLottieView 의 ZIndex 가 0으로 변경되면서 Color 보다 아래로 이동하여
애니메이션이 적용 안된 것 처럼 보이는 것이었다.
따라서 해결하려면 CustomLottieView 의 ZIndex 를 명시적으로 1로 설정하거나, Color 의 ZIndex 를 -1 로 설정하면 해결할 수 있다.
코드 및 스크린샷
struct ContentView: View {
@State var isAnimating = false
var body: some View {
ZStack {
Color.darkGreen
.ignoresSafeArea()
//.zIndex(-1) <- 이렇게 다셔도 됩니다.
.onTapGesture {
withAnimation(.easeInOut) {
isAnimating = true
}
}
if isAnimating {
CustomLottieView()
.zIndex(1) // <- 여기에 달거나
.transition(.move(edge: .bottom))
.onTapGesture {
withAnimation(.easeInOut) {
isAnimating = false
}
}
}
}
}
}
'iOS > UIKit & SwiftUI' 카테고리의 다른 글
[Gradient Animation] AngularGradient Border 애니메이션 넣기 (3) | 2022.09.25 |
---|---|
[SwiftUI]커스텀 백버튼 백 제스처 시 화면 멈춤 이슈 해결 (0) | 2022.09.11 |
[iOS][Swift] 투두리스트 앱 만들기 - UI 구성 AutoLayout Constraint 걸기 (0) | 2022.09.11 |
[iOS][Swift] 오토레이아웃 개념잡기 (0) | 2022.09.11 |