Jetpack Compose 환경에서 액티비티 전환 애니메이션을 효과적으로 설정하는 방법

개요

Jetpack Compose를 사용하여 Android 앱을 개발할 때, 화면 전환 애니메이션을 제어하는 것이 중요합니다. 특히 Android 14(API 34, Upside Down Cake) 이상에서는 새로운 overrideActivityTransition() 메서드를 사용할 수 있으며, 이전 버전에서는 기존의 overridePendingTransition()을 활용해야 합니다.

이번 글에서는 Jetpack Compose 환경에서 액티비티 전환 애니메이션을 효과적으로 설정하는 방법을 알아봅니다.

---

Jetpack Compose에서 액티비티 전환 애니메이션 적용하기

1. 기존의 overridePendingTransition() (Android 14 이하)

기존 Android View 환경에서는 overridePendingTransition()을 사용하여 액티비티 전환 애니메이션을 설정했습니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        
        setContent {
            MyApp()
        }
        
        overridePendingTransition(0, 0)
    }
}

• overridePendingTransition(enterAnim, exitAnim)을 사용하여 새로운 액티비티로 전환될 때의 애니메이션을 설정합니다.
• 0, 0을 설정하면 애니메이션 없이 즉시 전환됩니다.

2. overrideActivityTransition() (Android 14 이상)

Android 14(API 34)부터는 overrideActivityTransition()을 사용하여 전환 애니메이션을 더 세밀하게 제어할 수 있습니다.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
    overrideActivityTransition(OVERRIDE_TRANSITION_OPEN, 0, 0)
} else {
    overridePendingTransition(0, 0)
}

• overrideActivityTransition(transitionType, enterAnim, exitAnim)
  • OVERRIDE_TRANSITION_OPEN 등 전환 타입을 지정할 수 있음.
  • 0, 0을 설정하면 애니메이션 없이 즉시 전환 가능.

 

Jetpack Compose에서 화면 전환 애니메이션 적용하기

Jetpack Compose에서는 NavHost와 rememberNavController()를 사용하여 화면을 전환할 수 있습니다. Compose에서는 overridePendingTransition()을 직접 사용할 필요 없이, NavController의 애니메이션을 활용하는 것이 더 적절합니다.

 

1. NavHost에서 애니메이션 적용

@Composable
fun MyApp() {
    val navController = rememberNavController()

    NavHost(navController, startDestination = "home") {
        composable("home") { HomeScreen(navController) }
        composable("details") {
            DetailsScreen(navController)
        }
    }
}

위와 같이 NavHost를 사용하면 별도의 overridePendingTransition() 없이도 화면 전환이 가능합니다.

 

2. AnimatedNavHost 활용 (Compose Navigation Animation)

Compose에서는 AnimatedNavHost를 활용하여 보다 세밀한 애니메이션을 적용할 수도 있습니다.

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatedNavigation() {
    val navController = rememberNavController()

    AnimatedNavHost(
        navController = navController,
        startDestination = "home",
        enterTransition = { fadeIn(animationSpec = tween(700)) },
        exitTransition = { fadeOut(animationSpec = tween(700)) }
    ) {
        composable("home") { HomeScreen(navController) }
        composable("details") { DetailsScreen(navController) }
    }
}

결론

• Android 14 이상에서는 overrideActivityTransition()을 사용하여 전환 애니메이션을 제어할 수 있습니다.
• Android 14 미만에서는 기존의 overridePendingTransition()을 활용해야 합니다.
• Jetpack Compose 환경에서는 NavHost 또는 AnimatedNavHost를 활용하여 화면 전환 애니메이션을 설정하는 것이 권장됩니다.

Jetpack Compose에서의 화면 전환은 기존 View 기반보다 훨씬 유연하게 관리할 수 있으며, AnimatedNavHost를 활용하면 더 부드러운 애니메이션을 적용할 수 있습니다. 🚀