Hedefler arasında animasyonlu geçiş

NavDisplay, kullanıcılar uygulamanızda gezinirken sorunsuz görsel geçişler oluşturmak için yerleşik animasyon özellikleri sağlar. Bu animasyonlar, meta verileri kullanarak NavDisplay için global olarak veya NavEntry başına özelleştirilebilir.

Varsayılan geçişleri geçersiz kılma

NavDisplay, gezinme sırasında içeriğin nasıl animasyonlu olacağını tanımlamak için ContentTransform öğelerini kullanır. NavDisplay için geçiş parametreleri sağlayarak varsayılan animasyon davranışlarını geçersiz kılabilirsiniz.

  • transitionSpec: Bu parametre, arka yığına içerik eklendiğinde (ör. ileriye gidilirken) uygulanacak ContentTransform değerini tanımlar.
  • popTransitionSpec: Bu parametre, içerik arka yığından kaldırıldığında (ör. geri gidildiğinde) uygulanacak ContentTransform değerini tanımlar.
  • predictivePopTransitionSpec: Bu parametre, tahmini geri hareketi kullanılarak içerik açıldığında uygulanacak ContentTransform değerini tanımlar.

Geçişleri NavEntry düzeyinde geçersiz kılma

Meta verilerini kullanarak belirli NavEntry'ler için özel animasyonlar da tanımlayabilirsiniz. NavDisplay, giriş başına geçiş uygulamak için özel meta veri anahtarlarını tanır:

  • NavDisplay.transitionSpec: İleri sarma gezinme animasyonunu tanımlamak için bu yardımcı işlevi kullanın.
  • NavDisplay.popTransitionSpec: Belirli bir NavEntry için geri sarma animasyonu tanımlamak üzere bu yardımcı işlevi kullanın.
  • NavDisplay.predictivePopTransitionSpec: Belirli bir NavEntry için tahmini geri hareket animasyonunu tanımlamak üzere bu yardımcı işlevi kullanın.

Giriş başına bu meta veri geçişleri, NavDisplay'ın aynı ada sahip genel geçişlerini geçersiz kılar.

Aşağıdaki snippet'te hem global NavDisplay geçişleri hem de NavEntry düzeyinde bir geçersiz kılma gösterilmektedir:

@Serializable
data object ScreenA : NavKey

@Serializable
data object ScreenB : NavKey

@Serializable
data object ScreenC : NavKey

class AnimatedNavDisplayActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {

            Scaffold { paddingValues ->

                val backStack = rememberNavBackStack(ScreenA)

                NavDisplay(
                    backStack = backStack,
                    onBack = { backStack.removeLastOrNull() },
                    entryProvider = entryProvider {
                        entry<ScreenA> {
                            ContentOrange("This is Screen A") {
                                Button(onClick = { backStack.add(ScreenB) }) {
                                    Text("Go to Screen B")
                                }
                            }
                        }
                        entry<ScreenB> {
                            ContentMauve("This is Screen B") {
                                Button(onClick = { backStack.add(ScreenC) }) {
                                    Text("Go to Screen C")
                                }
                            }
                        }
                        entry<ScreenC>(
                            metadata = NavDisplay.transitionSpec {
                                // Slide new content up, keeping the old content in place underneath
                                slideInVertically(
                                    initialOffsetY = { it },
                                    animationSpec = tween(1000)
                                ) togetherWith ExitTransition.KeepUntilTransitionsFinished
                            } + NavDisplay.popTransitionSpec {
                                // Slide old content down, revealing the new content in place underneath
                                EnterTransition.None togetherWith
                                    slideOutVertically(
                                        targetOffsetY = { it },
                                        animationSpec = tween(1000)
                                    )
                            } + NavDisplay.predictivePopTransitionSpec {
                                // Slide old content down, revealing the new content in place underneath
                                EnterTransition.None togetherWith
                                    slideOutVertically(
                                        targetOffsetY = { it },
                                        animationSpec = tween(1000)
                                    )
                            }
                        ) {
                            ContentGreen("This is Screen C")
                        }
                    },
                    transitionSpec = {
                        // Slide in from right when navigating forward
                        slideInHorizontally(initialOffsetX = { it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { -it })
                    },
                    popTransitionSpec = {
                        // Slide in from left when navigating back
                        slideInHorizontally(initialOffsetX = { -it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { it })
                    },
                    predictivePopTransitionSpec = {
                        // Slide in from left when navigating back
                        slideInHorizontally(initialOffsetX = { -it }) togetherWith
                            slideOutHorizontally(targetOffsetX = { it })
                    },
                    modifier = Modifier.padding(paddingValues)
                )
            }
        }
    }
}
AnimationSnippets.kt

Şekil 1. Özel animasyonlara sahip uygulama.