الصورة المتحركة التي تعرض إيماءة الرجوع إلى الخلف التنبؤية
الصورة المتحركة التنبؤية التي تعرض إيماءة الرجوع إلى الخلف على مستوى الأنشطة المختلفة
الرسم المتحرّك التنبؤي بين المهام:
تفعيل الصور المتحركة التلقائية في النظام
تتوفّر الصور المتحركة الخاصة بالرجوع إلى الشاشة الرئيسية والتنقل بين الأنشطة والتنقل بين المهام على أجهزة Android 15 والإصدارات الأحدث للتطبيقات التي تم نقلها إلى واجهات برمجة التطبيقات المتوافقة مع معالجة الرجوع.
الرجوع إلى الشاشة الرئيسية: يعيد المستخدم إلى الشاشة الرئيسية.
التنقّل بين الأنشطة: عمليات الانتقال بين الأنشطة داخل التطبيق
يتم تفعيل هذه الصور المتحركة تلقائيًا على الإصدار 15 من نظام التشغيل Android والإصدارات الأحدث. على الأجهزة التي تعمل بنظام التشغيل Android 13 أو 14، يمكن للمستخدمين تفعيلها من خلال خيارات المطوّرين.
للحصول على رسوم متحركة للنظام، يجب تعديل تبعية AndroidX Activity إلى 1.6.0 أو إصدار أحدث.
تفعيل ميزة "الرجوع التنبؤي" باستخدام Navigation Compose
لاستخدام ميزة "الرجوع التوقّعي" في Navigation Compose، تأكَّد من استخدام المكتبة
navigation-compose2.8.0
أو إصدار أحدث.
تتلاشى شاشة Navigation Compose تلقائيًا وتظهر الشاشة السابقة عندما يمرّر المستخدم سريعًا للرجوع:
الشكل 2. الرسوم المتحركة التلقائية للتلاشي التدريجي داخل تطبيق SociaLite
أثناء التنقّل، يمكنك إنشاء انتقالات مخصّصة باستخدام
popEnterTransition وpopExitTransition. عند تطبيق هذه المعدِّلات على
NavHost، تتيح لك تحديد طريقة تحرُّك شاشتَي الدخول والخروج. يمكنك استخدامها لإنشاء مجموعة متنوعة من التأثيرات، مثل تغيير الحجم أو التلاشي أو الانزلاق.
في هذا المثال، يتم استخدام scaleOut داخل popExitTransition لتصغير حجم الشاشة التي يتم الخروج منها أثناء رجوع المستخدم. بالإضافة إلى ذلك، تحدّد المَعلمة
transformOrigin النقطة التي يحدث حولها تأثير التحريك الخاص بتغيير الحجم. تكون القيمة التلقائية هي منتصف الشاشة (0.5f, 0.5f).
يمكنك تعديل هذه القيمة لجعل القياس يبدأ من نقطة مختلفة.
يتحكّم popEnterTransition وpopExitTransition تحديدًا في الصور المتحركة عند إزالة العناصر من سجلّ الرجوع، وذلك باستخدام إيماءة الرجوع مثلاً. يمكنك أيضًا استخدام enterTransition وexitTransition لتحديد الرسوم المتحركة الخاصة بعناصر composable عند الدخول والخروج بشكل عام، وليس فقط عند استخدام ميزة "الرجوع التوقّعي". إذا ضبطت enterTransition وexitTransition فقط، سيتم استخدامهما للتنقّل العادي ولإزالة آخر جزء من سجلّ الرجوع. ومع ذلك، يتيح لك استخدام popEnterTransition وpopExitTransition إنشاء رسوم متحركة مميزة للتنقّل للخلف.
الدمج مع انتقالات العناصر المشترَكة
توفّر عمليات الانتقال بين العناصر المشترَكة ربطًا مرئيًا سلسًا بين العناصر القابلة للإنشاء التي تتضمّن محتوًى مشتركًا، ويتم استخدامها غالبًا للتنقّل.
الشكل 4. انتقال العنصر المشترَك مع ميزة "إيماءة إظهار شاشة الرجوع" في Navigation
Compose
إتاحة ميزة "إيماءة إظهار شاشة الرجوع" باستخدام مكوّنات Material Compose
تم تصميم العديد من المكوّنات في مكتبة Material Compose لتعمل بسلاسة مع إيماءات الرجوع التوقّعية. لتفعيل الصور المتحركة الخاصة بميزة "الرجوع التوقّعي" في هذه المكوّنات، عليك تضمين أحدث إصدار من Material3 (الإصدار androidx.compose.material3:material3-*:1.3.0 أو الإصدار الأحدث) في مشروعك.
تشمل مكوّنات Material التي تتيح استخدام صور متحركة تعرض إيماءة الرجوع إلى الخلف التنبؤية ما يلي:
يخضع كل من المحتوى وعيّنات التعليمات البرمجية في هذه الصفحة للتراخيص الموضحّة في ترخيص استخدام المحتوى. إنّ Java وOpenJDK هما علامتان تجاريتان مسجَّلتان لشركة Oracle و/أو الشركات التابعة لها.
تاريخ التعديل الأخير: 2025-08-27 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","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-08-27 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],null,["# Set up Predictive back\n\nPredictive back and system animations are enabled by default. If your app\nintercepts the back event and you haven't migrated to predictive back,\n[update your app to use supported back navigation APIs](/guide/navigation/custom-back/predictive-back-gesture#update-custom) \nThe predictive back-to-home animation. \nThe predictive cross-activity animation. \nThe predictive cross-task animation.\n\nEnable default system animations\n--------------------------------\n\nThe back-to-home, cross-activity, and cross-task system animations are available\non Android 15 and later devices for apps that have migrated to the supported\nback handling APIs.\n\n- **Back-to-home**: Returns the user to the home screen.\n- **Cross-activity**: Transitions between activities within the app.\n- **Cross-task** : Transitions between [tasks](/guide/components/activities/tasks-and-back-stack).\n\nThese animations are enabled by default on Android 15 and higher. On devices\nrunning Android 13 or 14, users can enable them through the\n[Developer options](/guide/navigation/custom-back/predictive-back-gesture#dev-option).\n| **Note:** Intercepting back at the root activity (e.g. `MainActivity.kt`) disables the back-to-home animation, and intercepting back at an Activity disables the cross-activity animation.\n\nTo get the system animations, update your AndroidX `Activity` dependency\nto [1.6.0](/jetpack/androidx/releases/activity#version_160_3) or higher.\n\nEnable predictive back with Navigation Compose\n----------------------------------------------\n\nTo use predictive back in Navigation Compose, ensure you're using the\n`navigation-compose` [2.8.0](/jetpack/androidx/releases/navigation#2.8.0)\nlibrary or higher.\n\nNavigation Compose automatically cross-fades between screens when the user\nswipes back:\n**Figure 2.** The default crossfade in-app animation in SociaLite.\n\nWhen navigating, you can create custom transitions with\n[`popEnterTransition`](/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation.NavHostController,kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.reflect.KClass,kotlin.collections.Map,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)) and [`popExitTransition`](/reference/kotlin/androidx/navigation/compose/package-summary#NavHost(androidx.navigation.NavHostController,kotlin.Any,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,kotlin.reflect.KClass,kotlin.collections.Map,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1)). When applied to your\n`NavHost`, these modifiers let you define how the enter and exit screens\nanimate. You can use them to create a variety of effects, such as scaling,\nfading, or sliding.\n\nIn this example, `scaleOut` is used within `popExitTransition` to scale down\nthe exiting screen as the user navigates back. Additionally, the\n`transformOrigin` parameter determines the point around which the scaling\nanimation occurs. By default, it's the center of the screen (`0.5f, 0.5f`).\nYou can adjust this value to make the scaling originate from a different point.\n\n\n```kotlin\nNavHost(\n navController = navController,\n startDestination = Home,\n popExitTransition = {\n scaleOut(\n targetScale = 0.9f,\n transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)\n )\n },\n popEnterTransition = {\n EnterTransition.None\n },\n modifier = modifier,\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/predictiveback/PredictiveBackSnippets.kt#L62-L75\n```\n\n\u003cbr /\u003e\n\nThis code produces the following result:\n**Figure 3.** A custom in-app animation in SociaLite.\n\n`popEnterTransition` and `popExitTransition` specifically control animations\nwhen popping the back stack, with a back gesture, for example. You can also use `enterTransition` and `exitTransition` to define animations for entering and\nexiting composables in general, not only for predictive back. If you only set `enterTransition` and `exitTransition`, they are used for both regular\nnavigation and popping the back stack. However, using `popEnterTransition` and `popExitTransition` lets you create distinct animations for back navigation.\n\nIntegrate with shared element transitions\n-----------------------------------------\n\nShared element transitions provide a smooth visual connection between\ncomposables with shared content, often used for navigation.\n**Figure 4.** Shared element transition with predictive back in Navigation Compose.\n\nTo use shared elements with Navigation Compose, see\n[Predictive back with shared elements](/develop/ui/compose/animation/shared-elements/navigation#predictive-back).\n\nSupport predictive back with Material Compose components\n--------------------------------------------------------\n\nMany components in the Material Compose library are designed to work seamlessly\nwith predictive back gestures. To enable predictive back animations in these\ncomponents, include the latest [Material3](/jetpack/androidx/releases/compose-material3) dependency (`androidx.compose.material3:material3-*:1.3.0` or higher) in your project.\n\nThe Material components that support predictive back animations include:\n\n- [`SearchBar`](https://m3.material.io/components/search/guidelines#3f2d4e47-2cf5-4c33-b6e1-5368ceaade55)\n- [`ModalBottomSheet`](https://m3.material.io/components/bottom-sheets/guidelines#c72ba2b1-906d-4cfa-9a6a-91e79555bad0)\n- [`ModalDrawerSheet/DismissibleDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))\n- [`ModalNavigationDrawer/DismissibleNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1))\n\n[`SearchBar`](/reference/kotlin/androidx/compose/material3/package-summary#SearchBar(kotlin.Function0,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SearchBarColors,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)) and [`ModalBottomSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalBottomSheet(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.SheetState,androidx.compose.ui.unit.Dp,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.ui.graphics.Color,kotlin.Function0,kotlin.Function0,androidx.compose.material3.ModalBottomSheetProperties,kotlin.Function1)) automatically animate with\npredictive back gestures. [`ModalNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#ModalNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,androidx.compose.ui.graphics.Color,kotlin.Function0)),\n[`ModalDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#ModalDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)), [`DismissibleDrawerSheet`](/reference/kotlin/androidx/compose/material3/package-summary#DismissibleDrawerSheet(androidx.compose.material3.DrawerState,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.WindowInsets,kotlin.Function1)), and\n[`DismissibleNavigationDrawer`](/reference/kotlin/androidx/compose/material3/package-summary#DismissibleNavigationDrawer(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.material3.DrawerState,kotlin.Boolean,kotlin.Function0)) require you to pass the `drawerState` to\ntheir respective sheet content composables.\n\nTest the predictive back gesture animation\n------------------------------------------\n\nIf you still use Android 13 or Android 14, you can test the back-to-home\nanimation.\n\nTo test this animation, follow these steps:\n\n1. On your device, go to **Settings \\\u003e System \\\u003e Developer options**.\n2. Select **Predictive back animations**.\n3. Launch your updated app, and use the back gesture to see it in action.\n\nOn Android 15 and later, this feature is enabled by default.\n\nAdditional resources\n--------------------\n\n- [Add predictive back animations codelab](/codelabs/predictive-back#0)\n- [Advanced layout animations in Compose video](https://www.youtube.com/watch?v=PR6rz1QUkAM&t=1195s&ab_channel=AndroidDevelopers)"]]
