หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

ขยายคลาสทรานซิชัน

หากต้องการสร้างทรานซิชันที่กำหนดเอง ให้เพิ่มคลาสลงในโปรเจ็กต์ที่ขยายคลาส 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) {}
}

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

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

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

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

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

หากต้องการส่งค่ามุมมองเริ่มต้นไปยังเฟรมเวิร์ก ให้ใช้ฟังก์ชัน 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) 1 ครั้งสําหรับการแสดงผลเป้าหมายแต่ละรายการในฉากสุดท้าย ส่วนในแง่อื่นๆ captureEndValues() จะทำงานเหมือนกับ captureStartValues()

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

Kotlin

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

Java

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

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

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

หากต้องการแสดงภาพการเปลี่ยนแปลงของมุมมองระหว่างสถานะในฉากเริ่มต้นกับสถานะในฉากสิ้นสุด ให้ระบุแอนิเมเตอร์โดยการลบล้างฟังก์ชัน 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 ดูข้อมูลเพิ่มเติมเกี่ยวกับโปรแกรมสร้างภาพเคลื่อนไหวของพร็อพเพอร์ตี้ได้ที่ภาพเคลื่อนไหวของพร็อพเพอร์ตี้

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

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