بدء نشاط باستخدام صورة متحركة

توفر انتقالات النشاط في تطبيقات Material Design اتصالات مرئية بين الحالات المختلفة من خلال الحركة والتحولات بين العناصر المشتركة. ويمكنك تحديد رسوم متحركة مخصصة لانتقالات الدخول والخروج ولانتقال العناصر المشتركة بين الأنشطة.

الشكل 1. تمثّل هذه السمة عملية انتقال تشمل العناصر المشتركة.

• تحدد نقطة الانتقال دخول كيفية دخول المشاهدات في أحد الأنشطة إلى المشهد. على سبيل المثال، في الانتقال explode، تدخل طرق العرض المشهد من الخارج وتنتقل إلى الداخل إلى وسط الشاشة.
• تحدد انتقالات الخروج كيفية خروج طرق العرض في أحد الأنشطة من المشهد. على سبيل المثال، في انتقال خروج explode، تخرج طرق العرض من المشهد بعيدًا عن المركز.
• يحدد انتقال العناصر المشتركة كيفية انتقال طرق العرض التي تتم مشاركتها بين نشاطين اثنين بين هذه الأنشطة. على سبيل المثال، إذا كان هناك نشاطان يتضمّنان الصورة نفسها في مواضع وأحجام مختلفة، يعمل الانتقال للعنصر المشترَك في changeImageTransform على نقل الصورة وضبطها بسلاسة بين هذين النشاطَين.

يتيح Android عمليتَي الدخول والخروج هذه:

• explode: نقل المشاهدات داخل أو خارج مركز المشهد.
• slide: نقل المشاهدات إلى داخل أو خارج أحد حواف المشهد.
• fade: لإضافة أو إزالة عرض من المشهد عن طريق تغيير معدل تعتيمه.

يُسمح بأي عملية نقل توسّع فئة Visibility كعملية انتقال دخول أو خروج. لمزيد من المعلومات، يمكنك الاطّلاع على مرجع واجهة برمجة التطبيقات الخاص بالفئة Transition.

يوفّر Android أيضًا عمليات النقل التالية للعناصر المشتركة:

• changeBounds: يؤدي هذا الخيار إلى تحريك التغييرات في حدود التنسيق لطرق العرض المستهدفة.
• changeClipBounds: لتحريك التغييرات في حدود المقاطع لالمشاهدات المستهدَفة
• changeTransform: يؤدي هذا الخيار إلى تحريك التغييرات في مقياس وتدوير المشاهدات المستهدفة.
• changeImageTransform: يؤدي هذا الخيار إلى تحريك التغييرات في حجم ومقياس الصور المستهدفة.

عند تفعيل عمليات انتقال الأنشطة في تطبيقك، يتم تفعيل عملية الانتقال التلقائية المتداخلة بين نشاطَي الدخول والخروج.

الشكل 2. انتقال مشهد مع عنصر مشترك واحد.

للاطّلاع على الرمز النموذجي الذي يتحرّك بين الأنشطة باستخدام العناصر المشتركة، يُرجى مراجعة ActivitySceneTransitionBasic.

التحقّق من إصدار النظام

تتوفّر واجهات برمجة التطبيقات لنقل النشاط في نظام التشغيل Android 5.0 (واجهة برمجة التطبيقات 21) والإصدارات الأحدث. للحفاظ على التوافق مع الإصدارات السابقة من Android، يُرجى التحقّق من version الخاص بالنظام أثناء وقت التشغيل قبل استدعاء واجهات برمجة التطبيقات لأي من الميزات التالية:

Kotlin

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

Java

// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    // Apply activity transition
} else {
    // Swap without transition
}

تحديد الانتقالات المخصصة

أولاً، عليك تفعيل الانتقالات بين محتوى النوافذ باستخدام السمة android:windowActivityTransitions عند تحديد نمط يتم اكتسابه من مظهر Material. يمكنك أيضًا تحديد انتقالات الدخول والخروج والمشاركة في العناصر المشتركة في تعريف النمط لديك:

<style name="BaseAppTheme" parent="android:Theme.Material">
  <!-- enable window content transitions -->
  <item name="android:windowActivityTransitions">true</item>

  <!-- specify enter and exit transitions -->
  <item name="android:windowEnterTransition">@transition/explode</item>
  <item name="android:windowExitTransition">@transition/explode</item>

  <!-- specify shared element transitions -->
  <item name="android:windowSharedElementEnterTransition">
    @transition/change_image_transform</item>
  <item name="android:windowSharedElementExitTransition">
    @transition/change_image_transform</item>
</style>

يتم تعريف الانتقال change_image_transform في هذا المثال على النحو التالي:

<!-- res/transition/change_image_transform.xml -->
<!-- (see also Shared Transitions below) -->
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
  <changeImageTransform/>
</transitionSet>

يتجاوب العنصر changeImageTransform مع الفئة ChangeImageTransform. للمزيد من المعلومات، يمكنك الاطّلاع على مرجع واجهة برمجة التطبيقات الخاص بـ Transition.

لتفعيل عمليات انتقال محتوى النافذة في الرمز بدلاً من ذلك، استدعِ الدالة Window.requestFeature():

Kotlin

// Inside your activity (if you did not enable transitions in your theme)
with(window) {
    requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS)

    // Set an exit transition
    exitTransition = Explode()
}

Java

// Inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

// Set an exit transition
getWindow().setExitTransition(new Explode());

لتحديد الانتقالات في الرمز البرمجي، يمكنك استدعاء الدوالّ التالية باستخدام كائن Transition:

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()

تحدّد الدالتان setExitTransition() وsetSharedElementExitTransition() عملية الانتقال للخروج لنشاط الاتصال. وتحدّد الدالتان setEnterTransition() وsetSharedElementEnterTransition() المرحلة الانتقالية للنشاط المسمى.

للحصول على التأثير الكامل لعملية الانتقال، يجب تفعيل عمليات نقل محتوى النافذة في كل من أنشطة الاتصال والأنشطة التي يتم طلبها. بخلاف ذلك، يبدأ نشاط الاتصال عملية انتقال الخروج، ولكن بعد ذلك سترى انتقالات النافذة، مثل التحجيم أو التلاشي.

لبدء الانتقال في أقرب وقت ممكن، استخدم دالة Window.setAllowEnterTransitionOverlap() في النشاط المسمى. ويتيح لك ذلك الحصول على انتقالات أكثر دراماتيكية للدخول.

بدء نشاط باستخدام الانتقالات

إذا قمت بتمكين الانتقالات وتعيين انتقال الخروج لأحد الأنشطة، يتم تنشيط الانتقال عند بدء نشاط آخر، كما يلي:

Kotlin

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle())

Java

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

إذا قمت بتعيين انتقال دخول للنشاط الثاني، فسيتم تنشيط هذا الانتقال أيضًا عند بدء النشاط. لإيقاف عمليات النقل عند بدء نشاط آخر، قدِّم حزمة خيارات null.

بدء نشاط باستخدام عنصر مشترك

لإنشاء رسم متحرك للانتقال بين نشاطين يحتويان على عنصر مشترك، قم بما يلي:

1. تفعيل عمليات نقل محتوى النوافذ في المظهر
2. حدد انتقالاً للعناصر المشتركة في أسلوبك.
3. عرِّف عملية الانتقال كمورد XML.
4. حدِّد اسمًا شائعًا للعناصر المشتركة في كلا التنسيقين باستخدام السمة android:transitionName.
5. استخدم الدالة ActivityOptions.makeSceneTransitionAnimation().

Kotlin

// Get the element that receives the click event
val imgContainerView = findViewById<View>(R.id.img_container)

// Get the common element for the transition in this activity
val androidRobotView = findViewById<View>(R.id.image_small)

// Define a click listener
imgContainerView.setOnClickListener( {
    val intent = Intent(this, Activity2::class.java)
    // Create the transition animation - the images in the layouts
    // of both activities are defined with android:transitionName="robot"
    val options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot")
    // Start the new activity
    startActivity(intent, options.toBundle())
})

Java

// Get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// Get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// Define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // Create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // Start the new activity
        startActivity(intent, options.toBundle());
    }
});

بالنسبة إلى طرق العرض الديناميكية المشتركة التي تنشئها في الرمز، استخدِم الدالة View.setTransitionName() لتحديد اسم عنصر مشترك في كلا النشاطين.

لعكس الصورة المتحركة لنقل المشهد عند الانتهاء من النشاط الثاني، استدعِ الدالة Activity.finishAfterTransition() بدلاً من Activity.finish().

بدء نشاط باستخدام عناصر مشتركة متعدّدة

لإنشاء رسم متحرك للانتقال بين نشاطَين يتضمّنان أكثر من عنصر مشترك واحد، حدِّد العناصر المشتركة في كلا التنسيقَين باستخدام السمة android:transitionName، أو استخدِم الدالة View.setTransitionName() في كلا النشاطَين، وأنشِئ كائن ActivityOptions على النحو التالي:

Kotlin

// Rename the Pair class from the Android framework to avoid a name clash
import android.util.Pair as UtilPair
...
val options = ActivityOptions.makeSceneTransitionAnimation(this,
        UtilPair.create(view1, "agreedName1"),
        UtilPair.create(view2, "agreedName2"))

Java

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));