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

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

الشكل 1. حاسمة الانتقال مع العناصر المشتركة.

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

يتيح Android وجود انتقالات الدخول والخروج هذه:

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

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

يتيح Android أيضًا إمكانية انتقال العناصر المشتركة هذه:

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

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

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

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

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

تتوفّر واجهات برمجة التطبيقات الخاصة بنقل الأنشطة على نظام التشغيل Android 5.0 (API 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:

يعمل 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"));