Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
NavDisplay bietet integrierte Animationsfunktionen, mit denen Sie flüssige visuelle Übergänge erstellen können, wenn Nutzer durch Ihre App navigieren. Sie können diese Animationen mithilfe von Metadaten global für die NavDisplay oder pro NavEntry anpassen.
Standardübergänge überschreiben
In NavDisplay werden ContentTransforms verwendet, um zu definieren, wie sich Inhalte während der Navigation animieren. Sie können die Standardanimationen überschreiben, indem Sie NavDisplay Übergangsparameter übergeben.
transitionSpec: Mit diesem Parameter wird die ContentTransform definiert, die angewendet wird, wenn dem Backstack Inhalte hinzugefügt werden (d.h. beim Vorwärtsnavigieren).
popTransitionSpec: Mit diesem Parameter wird die ContentTransform definiert, die angewendet wird, wenn Inhalte aus dem Backstack entfernt werden (d.h. beim Zurücknavigieren).
predictivePopTransitionSpec: Mit diesem Parameter wird die ContentTransform definiert, die angewendet wird, wenn Inhalte mit einer Touch-Geste für die Vorhersage der Navigation ausgegeben werden.
Übergänge auf Ebene einzelner NavEntry überschreiben
Außerdem können Sie mithilfe der Metadaten benutzerdefinierte Animationen für bestimmte NavEntrys definieren. NavDisplay erkennt spezielle Metadatenschlüssel, um Übergänge pro Eintrag anzuwenden:
NavDisplay.transitionSpec: Mit dieser Hilfsfunktion definieren Sie die Animation für die Vorwärtsnavigation.
NavDisplay.popTransitionSpec: Mit dieser Hilfsfunktion können Sie die Animationseffekte für die Rückwärtsnavigation für eine bestimmte NavEntry definieren.
NavDisplay.predictivePopTransitionSpec: Mit dieser Hilfsfunktion können Sie die Animation für vorausschauende Zurück-Gesten für eine bestimmte NavEntry definieren.
Diese Metadatenübergänge pro Eintrag überschreiben die globalen Übergänge von NavDisplay mit demselben Namen.
Das folgende Snippet zeigt sowohl globale NavDisplay-Übergänge als auch eine Überschreibung auf individueller NavEntry-Ebene:
@SerializabledataobjectScreenA:NavKey@SerializabledataobjectScreenB:NavKey@SerializabledataobjectScreenC:NavKeyclassAnimatedNavDisplayActivity:ComponentActivity(){overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)setContent{Scaffold{paddingValues->
valbackStack=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 underneathslideInVertically(initialOffsetY={it},animationSpec=tween(1000))togetherWithExitTransition.KeepUntilTransitionsFinished}+NavDisplay.popTransitionSpec{// Slide old content down, revealing the new content in place underneathEnterTransition.NonetogetherWithslideOutVertically(targetOffsetY={it},animationSpec=tween(1000))}+NavDisplay.predictivePopTransitionSpec{// Slide old content down, revealing the new content in place underneathEnterTransition.NonetogetherWithslideOutVertically(targetOffsetY={it},animationSpec=tween(1000))}){ContentGreen("This is Screen C")}},transitionSpec={// Slide in from right when navigating forwardslideInHorizontally(initialOffsetX={it})togetherWithslideOutHorizontally(targetOffsetX={-it})},popTransitionSpec={// Slide in from left when navigating backslideInHorizontally(initialOffsetX={-it})togetherWithslideOutHorizontally(targetOffsetX={it})},predictivePopTransitionSpec={// Slide in from left when navigating backslideInHorizontally(initialOffsetX={-it})togetherWithslideOutHorizontally(targetOffsetX={it})},modifier=Modifier.padding(paddingValues))}}}}
Abbildung 1. App mit benutzerdefinierten Animationen
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-27 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-27 (UTC)."],[],[],null,["# Animate between destinations\n\n[`NavDisplay`](/reference/kotlin/androidx/navigation3/ui/package-summary#NavDisplay(kotlin.collections.List,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.Function1,kotlin.collections.List,androidx.navigation3.ui.SceneStrategy,androidx.compose.animation.SizeTransform,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)) provides built-in animation capabilities to create smooth\nvisual transitions as users navigate through your app. You can customize these\nanimations globally for the `NavDisplay` or on a per-`NavEntry` basis using\nmetadata.\n\nOverride default transitions\n----------------------------\n\n`NavDisplay` uses `ContentTransform`s to define how content animates during\nnavigation. You can override the default animation behaviors by providing\ntransition parameters to `NavDisplay`.\n\n- `transitionSpec`: This parameter defines the `ContentTransform` to apply when content is added to the back stack (i.e., when navigating forward).\n- `popTransitionSpec`: This parameter defines the `ContentTransform` to apply when content is removed from the back stack (i.e., when navigating back).\n- `predictivePopTransitionSpec`: This parameter defines the `ContentTransform` to apply when content is popped using a predictive back gesture.\n\nOverride transitions at the individual `NavEntry` level\n-------------------------------------------------------\n\nYou can also define custom animations for specific [`NavEntry`s](/reference/kotlin/androidx/navigation3/runtime/NavEntry) using their\nmetadata. `NavDisplay` recognizes special metadata keys to apply per-entry\ntransitions:\n\n- `NavDisplay.transitionSpec`: Use this helper function to define the forward navigation animation.\n- `NavDisplay.popTransitionSpec`: Use this helper function to define the backward navigation animation for a specific `NavEntry`.\n- `NavDisplay.predictivePopTransitionSpec`: Use this helper function to define the animation for predictive back gestures for a specific `NavEntry`.\n\nThese per-entry metadata transitions override the `NavDisplay`'s global\ntransitions of the same name.\n\nThe following snippet demonstrates both global `NavDisplay` transitions and an\noverride at the individual `NavEntry` level:\n\n\n```kotlin\n@Serializable\ndata object ScreenA : NavKey\n\n@Serializable\ndata object ScreenB : NavKey\n\n@Serializable\ndata object ScreenC : NavKey\n\nclass AnimatedNavDisplayActivity : ComponentActivity() {\n\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContent {\n\n Scaffold { paddingValues -\u003e\n\n val backStack = rememberNavBackStack(ScreenA)\n\n NavDisplay(\n backStack = backStack,\n onBack = { backStack.removeLastOrNull() },\n entryProvider = entryProvider {\n entry\u003cScreenA\u003e {\n ContentOrange(\"This is Screen A\") {\n Button(onClick = { backStack.add(ScreenB) }) {\n Text(\"Go to Screen B\")\n }\n }\n }\n entry\u003cScreenB\u003e {\n ContentMauve(\"This is Screen B\") {\n Button(onClick = { backStack.add(ScreenC) }) {\n Text(\"Go to Screen C\")\n }\n }\n }\n entry\u003cScreenC\u003e(\n metadata = NavDisplay.transitionSpec {\n // Slide new content up, keeping the old content in place underneath\n slideInVertically(\n initialOffsetY = { it },\n animationSpec = tween(1000)\n ) togetherWith ExitTransition.KeepUntilTransitionsFinished\n } + NavDisplay.popTransitionSpec {\n // Slide old content down, revealing the new content in place underneath\n EnterTransition.None togetherWith\n slideOutVertically(\n targetOffsetY = { it },\n animationSpec = tween(1000)\n )\n } + NavDisplay.predictivePopTransitionSpec {\n // Slide old content down, revealing the new content in place underneath\n EnterTransition.None togetherWith\n slideOutVertically(\n targetOffsetY = { it },\n animationSpec = tween(1000)\n )\n }\n ) {\n ContentGreen(\"This is Screen C\")\n }\n },\n transitionSpec = {\n // Slide in from right when navigating forward\n slideInHorizontally(initialOffsetX = { it }) togetherWith\n slideOutHorizontally(targetOffsetX = { -it })\n },\n popTransitionSpec = {\n // Slide in from left when navigating back\n slideInHorizontally(initialOffsetX = { -it }) togetherWith\n slideOutHorizontally(targetOffsetX = { it })\n },\n predictivePopTransitionSpec = {\n // Slide in from left when navigating back\n slideInHorizontally(initialOffsetX = { -it }) togetherWith\n slideOutHorizontally(targetOffsetX = { it })\n },\n modifier = Modifier.padding(paddingValues)\n )\n }\n }\n }\n}https://github.com/android/snippets/blob/26d364466ee1c03d658ba2f0905f7cc1a97afefa/compose/snippets/src/main/java/com/example/compose/snippets/navigation3/animations/AnimationSnippets.kt#L46-L129\n```\n\n\u003cbr /\u003e\n\n**Figure 1**. App with custom animations."]]