compose navigation 기본 애니메이션 개선

현재 프로젝트에서 화면 이동 애니메이션이 일관적이지 않다.
그 이유는 compose navigation에서 제공하는 기본 애니메이션이 적용되어 있기 때문이다.

이번 포스트에서, 디자이너 분이 주신 요구사항을 반영하면서 navigation animation 개선을 진행해 보고자 한다.

현재 청하의 애니메이션 설정

1뎁스끼리의 애니메이션

홈 ↔ 게시판 : 디졸브 애니메이션(투명도 100에서 0으로 바뀌는)
홈 → 등록: 디졸브 애니메이션
홈 → 마이페이지: 아래에서 위로 등장
마이페이지 → 다른화면 : 위에서 아래로 등장
다른화면 → 마이페이지 : 아래에서 위로 등장

1뎁스 → 2뎁스 이동 및 2뎁스끼리 애니메이션

클래스 리스트 → 상세페이지 : 디졸브
게시판 리스트 → 게시글 내용 : 오른쪽에서 왼쪽으로
게시판 주제끼리 이동 → 즉시이동

현재 추가적인 애니메이션 설정을 하지 않았는데, 다양한 애니메이션이 적용되었다.
또한 navigation 이슈로 빠른 전환시에 또 다른 애니메이션이 발생하는 경우도 있었다.

이경우 라이브러리를 업데이트 하자.
내 기준 2.7.x 버전 -> 2.8.0.beta05 로 업데이트 하였을 때 의도치 않는 애니메이션들이 발생하는 문제는 개선 되었다. (전부 디졸브 애니메이션으로 적용되었음)

여기서, 원하는 컴포저블에 exitTransition, enterTransition 애니메이션을 적용하면 된다.

나의 경우 슬라이드 애니메이션을 적용해서 간략한 코드는 아래와 같다.

composable(
        POLICY_CONSENT_ROUTE,
        enterTransition = {
            slideIntoContainer(
                AnimatedContentTransitionScope.SlideDirection.Left,
                animationSpec = tween(500),
            )
        },
        exitTransition = {
            slideOutOfContainer(
                AnimatedContentTransitionScope.SlideDirection.Right,
                animationSpec = tween(500),
            )
        },
    ) {
        PolicyConsentRoute(
            onShowSnackBar = onShowSnackBar,
            onShowPrivacyPolicyClick = onShowPrivacyPolicyClick,
            onShowTermsOfServiceClick = onShowTermsOfServiceClick,
            onSuccessToNext = onSuccessToNext,
        )
    }

주의할 점

애니메이션은 잘 적용된 것 같은데, 안에 내용만 움직인다면.. 뭔가 버벅임이 보인다면.. 스크린에 배경색을 적용하자