يتيح لك مكوِّن التنقل إضافة خاصية وعرض الرسوم المتحركة إلى الإجراءات. لإنشاء صور متحركة بنفسك، اطّلِع على موارد الصور المتحركة.
يتضمن التنقل أيضًا العديد من الرسوم المتحركة الافتراضية للبدء. لإضافة رسوم متحركة إلى إجراء ما، قم بما يلي:
- في محرر التنقل، انقر على الإجراء الذي يجب أن تحدث فيه الرسوم المتحركة.
- في قسم الصور المتحركة من لوحة السمات، انقر على سهم القائمة المنسدلة بجوار الصورة المتحركة التي تريد إضافتها. يمكنك الاختيار من بين
الأنواع التالية:
- إدخال وجهة
- الخروج من وجهة
- إدخال وجهة من خلال إجراء الفهرسة، وهو إجراء يخرج وجهات إضافية من الحزمة الخلفية أثناء التنقل.
- الخروج من وجهة من خلال إجراء منبثقة
- اختر صورة متحركة من قائمة الرسوم المتحركة في المشروع التي تظهر.
![قسم الرسوم المتحركة في لوحة السمات](https://developer.android.com/static/images/guide/navigation/animation-attributes.png?authuser=7&hl=ar)
بعد إضافة الصور المتحركة، انقر على علامة التبويب النص للتبديل إلى طريقة عرض نص XML. يظهر الآن ملف XML الخاص بالصور المتحركة في عنصر <action>
المقابل. في المثال التالي، specifyAmountFragment
هي وجهة المصدر للإجراء confirmationAction
:
<fragment android:id="@+id/specifyAmountFragment" android:name="com.example.buybuddy.buybuddy.SpecifyAmountFragment" android:label="fragment_specify_amount" tools:layout="@layout/fragment_specify_amount"> <action android:id="@+id/confirmationAction" app:destination="@id/confirmationFragment" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left" app:popEnterAnim="@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" /> </fragment>
إضافة انتقالات العناصر المشتركة بين الوجهات
عند مشاركة عرض بين وجهتين، يمكنك استخدام انتقال العنصر المشترك لتحديد كيفية انتقال العرض عند الانتقال من وجهة إلى أخرى. تُعد انتقالات العناصر المشتركة جزءًا من إطار عمل النقل.
يتم توفير العناصر المشتركة آليًا بدلاً من
استخدام ملف XML للتنقل. تشتمل كل من وجهات الأنشطة والمجزأة على فئة فرعية
من واجهة Navigator.Extras
تقبل خيارات إضافية للتنقل، بما في ذلك العناصر
المشتركة. يمكنك تمرير Extras
عند الاتصال على
navigate()
.
انتقال العنصر الذي تمت مشاركته إلى وجهة جزء
تتيح لك الفئة FragmentNavigator.Extras
ربط العناصر المشترَكة من وجهة إلى أخرى حسب اسم عملية النقل، تمامًا مثل استخدام FragmentTransaction.addSharedElement()
.
يمكنك بعد ذلك تمرير المزايا الإضافية إلى navigate()
، كما هو موضح في المثال التالي:
Kotlin
val extras = FragmentNavigatorExtras(view1 to "hero_image") view.findNavController().navigate( R.id.confirmationAction, null, // Bundle of args null, // NavOptions extras)
Java
FragmentNavigator.Extras extras = new FragmentNavigator.Extras.Builder() .addSharedElement(view1, "hero_image") .build(); Navigation.findNavController(view).navigate( R.id.details, null, // Bundle of args null, // NavOptions extras);
انتقال العناصر المشتركة إلى وجهة نشاط
تعتمد الأنشطة على ActivityOptionsCompat
للتحكّم في عمليات نقل العناصر التي تمت مشاركتها كما هو موضَّح في مستندات بدء نشاط باستخدام عنصر مشترك وكما هو موضّح في المثال أدناه:
Kotlin
// Rename the Pair class from the Android framework to avoid a name clash import android.util.Pair as UtilPair ... val options = ActivityOptionsCompat.makeSceneTransitionAnimation(activity, UtilPair.create(view1, "hero_image")) val extras = ActivityNavigatorExtras(options) view.findNavController().navigate( R.id.details, null, // Bundle of args null, // NavOptions extras)
Java
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view1, "hero_image")); ActivityNavigatorExtras extras = new ActivityNavigatorExtras.Builder() .setActivityOptions(options) .build(); Navigation.findNavController(view).navigate( R.id.details, null, // Bundle of args null, // NavOptions extras);
تطبيق الصور المتحركة المنبثقة على تأثيرات الانتقال بين الأنشطة
عند الانتقال من أو إلى Activity
، لا يتم تطبيق الصور المتحركة
للنافذة المنبثقة تلقائيًا. بدلاً من ذلك، يجب طلب النطاق
ActivityNavigator.applyPopAnimationsToPendingTransition()
من وجهة Activity
المستهدَفة التي من المفترض أن تظهر فيها الصورة المتحركة:
Kotlin
override fun finish() { super.finish() ActivityNavigator.applyPopAnimationsToPendingTransition(this) }
Java
@Override public void finish() { super.finish(); ActivityNavigator.applyPopAnimationsToPendingTransition(this); }