💥 Fade-out 애니메이션으로 인한 문제 발생

문제 정의

화면 전환 순서는 home → album → album_folder → photo_info이다.

하지만 위의 로그에서 보다시피 album_folder에서 album으로 갔다가 다시 album_folder를 클릭하면 photo_info로 가버리는 문제가 발생했다.

문제 해결 방법

화면 전환 시 발생하는 애니메이션을 제거하여 임시 해결

또 다른 해결 방법으로는 Fade-in/out 이 아닌, 다른 애니메이션을 적용하여 해결 가능

문제 해결 진행

문제 정의의 로그에서 보다시피 앨범 → 앨범 폴더 → 사진 상세 로 가야하는 화면 전환 흐름이 fade-out 적용으로 인한 잔상 문제로 앨범에서 바로 사진 상세로 가버리는 문제가 발생했다. 처음에는 fade-out의 시간을 줄여서 해결하고자 했는데 아무리 줄여도, 앨범 폴더에서 연속으로 뒤로가기와 다시 앨범 폴더로 가는 흐름을 누른다면 사진 상세로 이동해버리는 문제가 발생해 아예 없애기로 했다.

이처럼 NavHost 의 내부 코드에는 enterTransition 과 exitTransition 에 각 각 fadeIn, fadeOut의 애니메이션이 0.7초로 적용되어 있는 것을 확인했다.

애니메이션을 없애기 위해 위 이미지 처럼 fadeIn, fadeOut의 시간을 0으로 바꿔 없애버렸다.

애니메이션을 없애고 다시 실행시켜봤는데 앨범 폴더로 이동할 때 화면이 순간적(약 0.1초)으로 깜박이는 증상이 있는 것을 확인했다.

영상으로 찍어 재생속도를 늦추고 확인했을 때, 사진 저장할 때의 애니메이션이 실행되고 있는 것으로 확인했다.

순 간 포 착

화면 전환 시 어떤 부분에서 실행되는 것인가를 확인했을 때 아래의 if문에서 실행되는 것을 알 수 있었다.

if (state.imgDownLoading.value) {
    RotatingImageLoading(
        drawableRes = R.drawable.fish_loading_image,
        stringRes = R.string.album_folder_screen_save_text
    )
}

화면 전환 시의 로그를 찍었을 때는 state.imgDownLoading.value 가 false에서 true로 바뀌면서 if문이 실행되어 애니메이션이 적용되었고, 다시 false로 바뀌면서 사라지는 것을 확인할 수 있었다.

어떤 부분에서 일어났을까 코드를 분석했을 때 아래의 코드에서 문제가 발생했다는 것을 알게되었다.

위 로직은 앨범 폴더를 불러올 때의 로직인데, 앨범 폴더를 불러올 때의 로딩 시간동안 애니메이션을 실행시키고 있는 것이었다.

하지만 앨범 불러오는 시간이 너무 순간적이라 그 순간적인 시간을 위해 애니메이션을 적용하는 것은 오히려 부자연스러워 보여 setLoading() 애니메이션을 제거했다.