เริ่มกิจกรรมโดยใช้ภาพเคลื่อนไหว

การเปลี่ยนกิจกรรมในแอปดีไซน์ Material มอบการเชื่อมต่อทางภาพระหว่าง สถานะต่างๆ ผ่านการเคลื่อนไหวและการแปลงระหว่างองค์ประกอบทั่วไป คุณสามารถระบุภาพเคลื่อนไหวที่กำหนดเองสำหรับการเปลี่ยนเข้าและออก และสำหรับ การเปลี่ยนแปลงขององค์ประกอบที่แชร์ระหว่างกิจกรรม

รูปที่ 1 ต การเปลี่ยนด้วยองค์ประกอบที่แชร์

  • การเปลี่ยนแบบ Enter กําหนดมุมมองของกิจกรรม เข้าสู่ฉาก ตัวอย่างเช่น ใน explode ให้ป้อนการเปลี่ยน มุมมองจะเข้าสู่ฉากจากภายนอก และบินเข้าศูนย์กลางของ บนหน้าจอ
  • การเปลี่ยนการออกจะกำหนดวิธีที่มุมมองในการออกจากกิจกรรม เพื่อสร้างฉาก ตัวอย่างเช่น ในการเปลี่ยนการออก explode มุมมอง ออกจากฉากให้ห่างจากจุดกึ่งกลาง
  • การเปลี่ยนองค์ประกอบที่แชร์จะกำหนดวิธีที่ข้อมูลพร็อพเพอร์ตี้ ที่แชร์กันระหว่างกิจกรรม 2 รายการ เปลี่ยนผ่านระหว่างกิจกรรมเหล่านี้ ตัวอย่างเช่น หากกิจกรรม 2 รายการมีรูปภาพเดียวกันในตำแหน่งและขนาดต่างกัน การเปลี่ยนองค์ประกอบที่แชร์ changeImageTransform รายการจะแปลและ ปรับขนาดภาพได้อย่างราบรื่นระหว่างกิจกรรมเหล่านี้

Android รองรับการเปลี่ยนเข้าและออกต่อไปนี้

  • explode: เลื่อนมุมมองเข้าหรือออกจากกึ่งกลางของฉาก
  • slide: เลื่อนมุมมองเข้าหรือออกจากขอบด้านใดด้านหนึ่งของ ด้วย
  • fade: เพิ่มหรือนำมุมมองออกจากฉากโดยการเปลี่ยนมุมมอง ความทึบแสง

ระบบรองรับการเปลี่ยนที่ขยายคลาส Visibility เป็นการเปลี่ยนเข้าหรือออก สำหรับข้อมูลเพิ่มเติม โปรดดูข้อมูลอ้างอิง API สำหรับ Transition

Android ยังรองรับการเปลี่ยนองค์ประกอบที่แชร์ต่อไปนี้ด้วย

  • changeBounds: ทำให้การเปลี่ยนแปลงขอบเขตเลย์เอาต์ของเป้าหมายเคลื่อนไหว ครั้ง
  • changeClipBounds: ทำให้การเปลี่ยนแปลงในขอบเขตคลิปของเป้าหมายเคลื่อนไหว ครั้ง
  • changeTransform: แสดงการเปลี่ยนแปลงขนาดและการหมุนของ การดูเป้าหมาย
  • changeImageTransform: แสดงการเปลี่ยนแปลงขนาดและขนาดของ รูปภาพเป้าหมาย

เมื่อคุณเปิดใช้การเปลี่ยนกิจกรรมในแอป การเฟดข้ามที่เป็นค่าเริ่มต้น การเปลี่ยนเปิดใช้งานระหว่างกิจกรรมที่เข้าและออก

รูปที่ 2 การเปลี่ยนฉากที่มีองค์ประกอบที่แชร์ 1 รายการ

สำหรับโค้ดตัวอย่างที่เคลื่อนไหวระหว่างกิจกรรมโดยใช้องค์ประกอบที่แชร์ โปรดดู ActivitySceneTransitionBasic

ตรวจสอบเวอร์ชันของระบบ

API การเปลี่ยนกิจกรรมมีให้บริการใน Android 5.0 (API 21) ขึ้นไป หากต้องการรักษาความเข้ากันได้กับ Android เวอร์ชันก่อนหน้าไว้ โปรดตรวจสอบ ระบบ version ขณะรันไทม์ก่อนคุณ เรียกใช้ API สำหรับฟีเจอร์ใดๆ ต่อไปนี้

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 เมื่อคุณกำหนดรูปแบบที่สืบทอดมาจากธีมวัสดุ คุณสามารถระบุ เข้า ออก และทรานซิชันที่แชร์ร่วมกันในคำจำกัดความรูปแบบ

<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 ดูข้อมูลเพิ่มเติมได้ที่ API ข้อมูลอ้างอิงสำหรับ 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() จะกำหนดคำสั่ง Enter สำหรับกิจกรรมที่ถูกเรียก

คุณต้องเปิดใช้งานเนื้อหาของหน้าต่างเพื่อให้การเปลี่ยนเกิดผลอย่างเต็มประสิทธิภาพ จะเปลี่ยนทั้งในกิจกรรมการโทรและกิจกรรมที่มีการเรียก มิเช่นนั้น การเรียก กิจกรรมจะเริ่มการเปลี่ยนผ่าน แต่คุณเห็นหน้าต่าง การเปลี่ยน เช่น การปรับขนาดหรือการจางลง

หากต้องการเริ่มการเปลี่ยนแบบ Enter โดยเร็วที่สุด ให้ใช้ Window.setAllowEnterTransitionOverlap() ในกิจกรรมที่ถูกเรียก ซึ่งจะช่วยให้คุณเปลี่ยนเข้าสู่เนื้อหาได้อย่างเข้มข้นยิ่งขึ้น

เริ่มกิจกรรมโดยใช้การเปลี่ยน

ถ้าคุณเปิดใช้การเปลี่ยน และตั้งค่าการเปลี่ยนการออกสำหรับกิจกรรม การเปลี่ยนเปิดใช้งานเมื่อคุณเริ่มต้นกิจกรรมอื่น ดังนี้

Kotlin

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

Java

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

หากคุณตั้งค่าการเปลี่ยนเป็น Enter สำหรับกิจกรรมที่ 2 การเปลี่ยนนั้นก็จะ เปิดใช้งานเมื่อกิจกรรมเริ่มต้น วิธีปิดใช้การเปลี่ยนเมื่อเริ่มต้น กิจกรรมอื่น โปรดระบุแพ็กเกจตัวเลือก null

เริ่มกิจกรรมด้วยองค์ประกอบที่แชร์

เพื่อสร้างภาพเคลื่อนไหวการเปลี่ยนหน้าจอระหว่างกิจกรรม 2 อย่างที่มี องค์ประกอบที่แชร์ ให้ทำดังนี้

  1. เปิดใช้การเปลี่ยนเนื้อหาของหน้าต่างในธีม
  2. ระบุการเปลี่ยนองค์ประกอบที่แชร์ในสไตล์ของคุณ
  3. กำหนดการเปลี่ยนของคุณเป็นทรัพยากร XML
  4. กำหนดชื่อทั่วไปให้กับองค์ประกอบที่ใช้ร่วมกันในเลย์เอาต์ทั้ง 2 แบบด้วย 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() เพื่อระบุชื่อองค์ประกอบทั่วไปในทั้ง 2 แบบ กิจกรรม

หากต้องการกลับภาพเคลื่อนไหวการเปลี่ยนฉากเมื่อคุณทำกิจกรรมที่ 2 เสร็จแล้ว ให้เรียกใช้ Activity.finishAfterTransition() แทน Activity.finish()

เริ่มกิจกรรมที่มีองค์ประกอบที่แชร์หลายรายการ

เพื่อสร้างภาพเคลื่อนไหวการเปลี่ยนฉากระหว่าง 2 กิจกรรมที่มีจำนวนมากกว่า องค์ประกอบที่แชร์มากกว่า 1 รายการ ให้กำหนดองค์ประกอบที่แชร์ในเลย์เอาต์ทั้ง 2 แบบด้วย android:transitionName หรือใช้แอตทริบิวต์ View.setTransitionName() ในทั้ง 2 กิจกรรม และ สร้าง 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"));