AnimatedVisibility 오버랩 이슈 해결

오버랩 이슈

페이드 인, 페이드 아웃이 진행될 때 새로 나타나는 뷰가 잠시 아래로 밀려있는 이슈가 발생하였다.

 

기존 코드

AnimatedVisibility(visible = uiState is TodoUiState.Success) {
    TodoScreenSuccess()
}
AnimatedVisibility(visible = uiState is TodoUiState.Empty) {
    TodoScreenEmpty()
}

문제 원인

페이드 인과 페이드 아웃이 아래처럼 진행되는데, t0 <= t < t1 일 때 두 개의 뷰가 동시에 존재하기 때문이다.

시각	기존 뷰	새 뷰
t0	페이드 아웃 시작	페이드인 시작 & 레이아웃에 추가
t1	투명도가 0에 도달 & 레이아웃에서 제거	투명도가 100에 도달

해결 방안

해결 방안은 아래와 같으며, 솔루션 1은 불필요한 지연 시간이 발생하기 때문에 솔루션 2를 선택하였다.

1. 페이드 아웃이 완전히 끝나 레이아웃에서 제거된 이후에 페이드 인 시작하기
2. TodoScreenSuccess와 TodoScreenEmpty를 겹치게 두기

Solution

Box {
    AnimatedVisibility(visible = uiState is TodoUiState.Success) {
        TodoScreenSuccess()
    }
    AnimatedVisibility(visible = uiState is TodoUiState.Empty) {
        TodoScreenEmpty()
    }
}