Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
NavDisplay proporciona capacidades de animación integradas para crear transiciones visuales fluidas a medida que los usuarios navegan por tu app. Puedes personalizar estas animaciones de forma global para NavDisplay o por NavEntry con metadatos.
Cómo anular las transiciones predeterminadas
NavDisplay usa ContentTransform para definir cómo se anima el contenido durante la navegación. Puedes anular los comportamientos de animación predeterminados si proporcionas parámetros de transición a NavDisplay.
transitionSpec: Este parámetro define el ContentTransform que se aplicará cuando se agregue contenido a la pila de actividades (es decir, cuando se navegue hacia adelante).
popTransitionSpec: Este parámetro define el ContentTransform que se debe aplicar cuando se quita contenido de la pila de actividades (es decir, cuando se navega hacia atrás).
predictivePopTransitionSpec: Este parámetro define el ContentTransform que se aplicará cuando se muestre el contenido con un gesto atrás predictivo.
Anula las transiciones a nivel de NavEntry individual
También puedes definir animaciones personalizadas para NavEntry específicas con sus metadatos. NavDisplay reconoce claves de metadatos especiales para aplicar transiciones por entrada:
NavDisplay.transitionSpec: Usa esta función auxiliar para definir la animación de navegación hacia adelante.
NavDisplay.popTransitionSpec: Usa esta función auxiliar para definir la animación de navegación hacia atrás para un NavEntry específico.
NavDisplay.predictivePopTransitionSpec: Usa esta función auxiliar para definir la animación de los gestos atrás predictivo para un NavEntry específico.
Estas transiciones de metadatos por entrada anula las transiciones globales de NavDisplay con el mismo nombre.
En el siguiente fragmento, se muestran las transiciones NavDisplay globales y una override a nivel de NavEntry individual:
@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))}}}}
El contenido y las muestras de código que aparecen en esta página están sujetas a las licencias que se describen en la Licencia de Contenido. Java y OpenJDK son marcas registradas de Oracle o sus afiliados.
Última actualización: 2025-07-27 (UTC)
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 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."]]