[SwiftUI] 사라질 때 transition이 적용안되는 경우 (SwiftUI removal transition not animated)

문제

Color 로 덮여있는 화면을 탭하면 Lottie 뷰가 아래에서 나타나고,

Lottie 뷰를 다시 탭하면 아래로 사라지도록 했다.

뷰가 나타나는 건 잘되는데, 사라질 때 왜 애니메이션이 안먹을까?

사라질때는 Transition이 적용 안됨

 

원인 및 해결

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
                        }
                    }
                
            }
        }
    }
}