สร้างภาพเคลื่อนไหวการเปลี่ยนที่กำหนดเอง

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

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

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

หน้านี้จะสอนวิธีบันทึกค่าพร็อพเพอร์ตี้และสร้างภาพเคลื่อนไหวเพื่อสร้าง การเปลี่ยนฉากที่กำหนดเอง

ขยายเวลาชั้นเรียนการเปลี่ยนผ่าน

หากต้องการสร้างการเปลี่ยนฉากที่กำหนดเอง ให้เพิ่มคลาสลงในโปรเจ็กต์ที่ขยายคลาส Transition และลบล้างฟังก์ชันที่แสดงในข้อมูลโค้ดต่อไปนี้

Kotlin

class CustomTransition : Transition() {

    override fun captureStartValues(transitionValues: TransitionValues) {}

    override fun captureEndValues(transitionValues: TransitionValues) {}

    override fun createAnimator(
        sceneRoot: ViewGroup,
        startValues: TransitionValues?,
        endValues: TransitionValues?
    ): Animator? {}

}

Java

public class CustomTransition extends Transition {

    @Override
    public void captureStartValues(TransitionValues values) {}

    @Override
    public void captureEndValues(TransitionValues values) {}

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues,
                                   TransitionValues endValues) {}
}

ส่วนต่อไปนี้จะอธิบายวิธีลบล้างฟังก์ชันเหล่านี้

บันทึกค่าพร็อพเพอร์ตี้มุมมอง

ภาพเคลื่อนไหวของการเปลี่ยนใช้ระบบภาพเคลื่อนไหวของพร็อพเพอร์ตี้ที่อธิบายไว้ในภาพรวมภาพเคลื่อนไหวของพร็อพเพอร์ตี้ ภาพเคลื่อนไหวของพร็อพเพอร์ตี้ จะเปลี่ยนพร็อพเพอร์ตี้ของ View จากค่าเริ่มต้นเป็นค่าสิ้นสุดในช่วงระยะเวลาที่ระบุ ดังนั้นเฟรมเวิร์กจึงต้องมีทั้งค่าเริ่มต้นและค่าสิ้นสุดของ พร็อพเพอร์ตี้เพื่อสร้างภาพเคลื่อนไหว

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

บันทึกค่าเริ่มต้น

หากต้องการส่งค่ามุมมองเริ่มต้นไปยังเฟรมเวิร์ก ให้ใช้ฟังก์ชัน captureStartValues(transitionValues) เฟรมเวิร์กจะเรียกใช้ฟังก์ชันนี้สำหรับทุกมุมมองในฉากเริ่มต้น อาร์กิวเมนต์ฟังก์ชัน คือออบเจ็กต์ TransitionValues ที่มีการอ้างอิง ไปยังมุมมองและอินสแตนซ์ Map ซึ่งคุณสามารถจัดเก็บค่ามุมมองที่ต้องการได้ ในการติดตั้งใช้งาน ให้ดึงค่าพร็อพเพอร์ตี้เหล่านี้และส่งกลับไปยัง เฟรมเวิร์กโดยจัดเก็บไว้ในแผนที่

เพื่อให้แน่ใจว่าคีย์สำหรับค่าพร็อพเพอร์ตี้จะไม่ขัดแย้งกับคีย์อื่นๆ ของ TransitionValues ให้ใช้รูปแบบการตั้งชื่อต่อไปนี้

package_name:transition_name:property_name

ข้อมูลโค้ดต่อไปนี้แสดงการใช้งานฟังก์ชัน captureStartValues()

Kotlin

class CustomTransition : Transition() {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private val PROPNAME_BACKGROUND = "com.example.android.customtransition:CustomTransition:background"

    override fun captureStartValues(transitionValues: TransitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues)
    }

    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private fun captureValues(transitionValues: TransitionValues) {
        // Get a reference to the view
        val view = transitionValues.view
        // Store its background property in the values map
        transitionValues.values[PROPNAME_BACKGROUND] = view.background
    }

    ...

}

Java

public class CustomTransition extends Transition {

    // Define a key for storing a property value in
    // TransitionValues.values with the syntax
    // package_name:transition_class:property_name to avoid collisions
    private static final String PROPNAME_BACKGROUND =
            "com.example.android.customtransition:CustomTransition:background";

    @Override
    public void captureStartValues(TransitionValues transitionValues) {
        // Call the convenience method captureValues
        captureValues(transitionValues);
    }


    // For the view in transitionValues.view, get the values you
    // want and put them in transitionValues.values
    private void captureValues(TransitionValues transitionValues) {
        // Get a reference to the view
        View view = transitionValues.view;
        // Store its background property in the values map
        transitionValues.values.put(PROPNAME_BACKGROUND, view.getBackground());
    }
    ...
}

บันทึกค่าสิ้นสุด

เฟรมเวิร์กจะเรียกใช้ฟังก์ชัน captureEndValues(TransitionValues) หนึ่งครั้งสำหรับทุกมุมมองเป้าหมายในฉากตอนจบ ในด้านอื่นๆ ทั้งหมด captureEndValues() จะทำงานเหมือนกับ captureStartValues()

ข้อมูลโค้ดต่อไปนี้แสดงการใช้งานฟังก์ชัน captureEndValues()

Kotlin

override fun captureEndValues(transitionValues: TransitionValues) {
    captureValues(transitionValues)
}

Java

@Override
public void captureEndValues(TransitionValues transitionValues) {
    captureValues(transitionValues);
}

ในตัวอย่างนี้ ทั้งฟังก์ชัน captureStartValues() และ captureEndValues() จะเรียกใช้ captureValues() เพื่อดึงและจัดเก็บค่า พร็อพเพอร์ตี้มุมมอง ที่ captureValues() ดึงมาจะเหมือนกัน แต่มีค่าต่างกันใน ฉากเริ่มต้นและฉากสิ้นสุด เฟรมเวิร์กจะดูแลแผนที่แยกต่างหากสำหรับสถานะเริ่มต้นและสถานะสิ้นสุดของมุมมอง

สร้างภาพเคลื่อนไหวที่กำหนดเอง

หากต้องการสร้างภาพเคลื่อนไหวของการเปลี่ยนแปลงมุมมองระหว่างสถานะในฉากเริ่มต้นกับสถานะในฉากสิ้นสุด ให้ระบุ Animator โดยการลบล้างฟังก์ชัน createAnimator() เมื่อเฟรมเวิร์กเรียกใช้ฟังก์ชันนี้ เฟรมเวิร์กจะส่งมุมมองรากของฉากและออบเจ็กต์ TransitionValues ที่มีค่าเริ่มต้นและค่าสิ้นสุด ที่คุณบันทึกไว้

จำนวนครั้งที่เฟรมเวิร์กเรียกใช้ฟังก์ชัน createAnimator() จะขึ้นอยู่กับการเปลี่ยนแปลงที่เกิดขึ้นระหว่างฉากเริ่มต้นและฉากสิ้นสุด

เช่น พิจารณาภาพเคลื่อนไหวแบบจางออกหรือ จางเข้าที่ใช้เป็นการเปลี่ยนฉากที่กำหนดเอง หากฉากเริ่มต้นมีเป้าหมาย 5 รายการ โดยมี 2 รายการที่นำออกจากฉากสิ้นสุด และฉากสิ้นสุดมีเป้าหมาย 3 รายการจากฉากเริ่มต้นบวกกับเป้าหมายใหม่ เฟรมเวิร์กจะเรียกใช้ createAnimator() 6 ครั้ง การเรียกใช้ 3 รายการจะทำให้เป้าหมายที่อยู่ในออบเจ็กต์ทั้ง 2 ฉาก จางหายไปและจางเข้ามา การเรียกอีก 2 ครั้งจะทำให้เป้าหมายที่นำออกจากฉากตอนจบจางหายไป One call จะเคลื่อนไหวการจางเข้าของเป้าหมายใหม่ในฉากจบ

สำหรับมุมมองเป้าหมายที่มีอยู่ในทั้งฉากเริ่มต้นและฉากสิ้นสุด เฟรมเวิร์กจะระบุ ออบเจ็กต์ TransitionValues สำหรับทั้งอาร์กิวเมนต์ startValues และ endValues สำหรับมุมมองเป้าหมายที่มีอยู่ในฉากเริ่มต้นหรือฉาก จบเท่านั้น เฟรมเวิร์กจะระบุTransitionValuesออบเจ็กต์ สำหรับอาร์กิวเมนต์ที่เกี่ยวข้องและnullสำหรับอาร์กิวเมนต์อื่นๆ

หากต้องการใช้ฟังก์ชัน createAnimator(ViewGroup, TransitionValues, TransitionValues) เมื่อสร้างทรานซิชันที่กำหนดเอง ให้ใช้ค่าพร็อพเพอร์ตี้มุมมองที่คุณบันทึกไว้เพื่อสร้างออบเจ็กต์ Animator แล้วส่งคืนไปยังเฟรมเวิร์ก ดูตัวอย่างการใช้งานได้ที่คลาส ChangeColor ในตัวอย่าง CustomTransition ดูข้อมูลเพิ่มเติมเกี่ยวกับแอนิเมเตอร์ของพร็อพเพอร์ตี้ได้ที่ ภาพเคลื่อนไหวของพร็อพเพอร์ตี้

ใช้การเปลี่ยนที่กำหนดเอง

การเปลี่ยนฉากที่กำหนดเองจะทำงานเหมือนกับการเปลี่ยนฉากในตัว คุณใช้การเปลี่ยนฉากที่กำหนดเองได้ โดยใช้เครื่องมือจัดการการเปลี่ยนฉากตามที่อธิบายไว้ในใช้การเปลี่ยนฉาก