קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
NavDisplay מספק יכולות אנימציה מובנות ליצירת מעברים חזותיים חלקים כשהמשתמשים מנווטים באפליקציה. אפשר להתאים אישית את האנימציות האלה באופן גלובלי עבור NavDisplay או על בסיס NavEntry ספציפי באמצעות מטא-נתונים.
שינוי של מעברי ברירת המחדל
NavDisplay משתמש בתגים ContentTransform כדי להגדיר את אופן האנימציה של התוכן במהלך הניווט. כדי לשנות את התנהגויות ברירת המחדל של האנימציה, אפשר לספק פרמטרים של מעבר ל-NavDisplay.
transitionSpec: הפרמטר הזה מגדיר את הערך של ContentTransform שיחול כשתווסף תוכן ל-back stack (כלומר, כשמנווטים קדימה).
popTransitionSpec: הפרמטר הזה מגדיר את ContentTransform שיחול כשתוכן יוסר מהמקבץ הקודם (כלומר כשעוברים אחורה).
predictivePopTransitionSpec: הפרמטר הזה מגדיר את הערך של ContentTransform שיחול כשהתוכן יוצג בחלון קופץ באמצעות תנועת חזרה חזויה.
שינוי של מעברים ברמת NavEntry הספציפית
אפשר גם להגדיר אנימציות בהתאמה אישית לNavEntry ספציפיים באמצעות המטא-נתונים שלהם. NavDisplay מזהה מפתחות מטא-נתונים מיוחדים כדי להחיל מעברים לכל רשומה:
NavDisplay.transitionSpec: משתמשים בפונקציית העזרה הזו כדי להגדיר את האנימציה של ניווט קדימה.
NavDisplay.popTransitionSpec: משתמשים בפונקציית העזרה הזו כדי להגדיר את האנימציה של ניווט לאחור ל-NavEntry ספציפי.
NavDisplay.predictivePopTransitionSpec: משתמשים בפונקציית העזרה הזו כדי להגדיר את האנימציה של תנועות חזרה חזויות ל-NavEntry ספציפי.
מעברי המטא-נתונים האלה לכל רשומה מבטלים את המעברים הגלובליים של NavDisplay באותו שם.
קטע הקוד הבא מדגים גם מעברים NavDisplay גלובליים וגם שינוי מברירת המחדל ברמת NavEntry הספציפית:
@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))}}}}
דוגמאות התוכן והקוד שבדף הזה כפופות לרישיונות המפורטים בקטע רישיון לתוכן. Java ו-OpenJDK הם סימנים מסחריים או סימנים מסחריים רשומים של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-27 (שעון UTC).
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 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."]]