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

ลองใช้วิธีแบบ Compose
Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีทำงานกับภาพเคลื่อนไหวใน Compose
สร้างภาพเคลื่อนไหวระหว่างเนื้อหาประเภทต่างๆ ใน Compose →

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

รูปที่ 1 การเปลี่ยนฉาก ที่มีองค์ประกอบที่ใช้ร่วมกัน

  • การเปลี่ยนฉากเข้าจะกำหนดวิธีที่มุมมองในกิจกรรม เข้าสู่ฉาก เช่น ใน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 เมื่อกำหนดสไตล์ที่รับค่ามาจากธีม 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 ดูข้อมูลเพิ่มเติมได้ที่ข้อมูลอ้างอิง 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() จะกำหนดการเปลี่ยน ฉากตอนเข้าสำหรับกิจกรรมที่เรียกใช้

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

หากต้องการเริ่มการเปลี่ยนฉากเข้าโดยเร็วที่สุด ให้ใช้ฟังก์ชัน Window.setAllowEnterTransitionOverlap() ในกิจกรรมที่เรียก ซึ่งจะช่วยให้คุณมีทรานซิชันการเข้าที่น่าทึ่งมากขึ้น

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

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

Kotlin

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

Java

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

หากตั้งค่าการเปลี่ยนฉากเข้าสำหรับกิจกรรมที่ 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"));