서론

현재 프로젝트 List item을 클릭시에 아래와 같은 애니메이션을 보인다.

아래 위로 튕기는 듯한 애니메이션으로 사용감이 좋지 않다고 판단했고, 개선기를 작성하고자 한다.

문제 해결

화면 전환시에 애니메이션이 발생한다. 이는 Navigation에 내장되어 있는 애니메이션으로 보인다.

https://stackoverflow.com/questions/77310878/dynamically-change-navigation-animation-jetpack-compose

위 스택오버플로우를 참고하여서 아래 코드를 적용할 composable 진입시 애니메이션을 추가하였다.

enterTransition = {
            slideIntoContainer(
                AnimatedContentTransitionScope.SlideDirection.Left,
                animationSpec = tween(700)
            )
        }

전체코드는 아래와 같다

fun NavController.navigateToPostDetail(
    postId: Long,
    navOptions: NavOptions? = null,
) = navigate(route = "$POST_DETAIL_ROUTE/$postId", navOptions)

fun NavGraphBuilder.postDetailGraph(
    onShowSnackBar: (String) -> Unit,
    onClickBackButton: () -> Unit,
    onClickEditButton: (RegisterPostUiModel) -> Unit,
    onAuthExpired: () -> Unit,
) {
    composable(
        route = POST_DETAIL_ROUTE_WITH_ARGUMENT,
        arguments = listOf(
            navArgument(POST_DETAIL_ID_ARGUMENT) { type = NavType.LongType },
        ),
        enterTransition = {
            slideIntoContainer(
                AnimatedContentTransitionScope.SlideDirection.Left,
                animationSpec = tween(700)
            )
        }
    ) {
        PostDetailRoute(
            onShowSnackBar = onShowSnackBar,
            onClickBackButton = onClickBackButton,
            onClickEditButton = onClickEditButton,
            onAuthExpired = onAuthExpired
        )
    }
}

해결 후 애니메이션

아직 개념에 대한 부재..

생각보다 내부로직이 복잡하여, 해당 애니메이션이 어떻게 발생하게 되었는지, 각 화면 전환마다 왜 애니메이션이 다른지 이해를 못하여서, 추후 여기다 정리를 해보려 한다.

또한 아직 화면 ExitAnimation과 enterAnimation이 매끄럽지 않는 상황이라, 디자이너와 논의하여 추가 수정 예정이다.