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

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

หากต้องการปรับแต่งวิธีการทำงานของภาพเคลื่อนไหวการเปลี่ยนองค์ประกอบที่แชร์ คุณสามารถใช้พารามิเตอร์ 2-3 รายการเพื่อเปลี่ยนวิธีการทำงานขององค์ประกอบที่แชร์

ข้อกำหนดเฉพาะสำหรับภาพเคลื่อนไหว

หากต้องการเปลี่ยนข้อกำหนดของภาพเคลื่อนไหวที่ใช้สำหรับการเคลื่อนไหวของขนาดและตำแหน่ง ให้ระบุพารามิเตอร์ boundsTransform อื่นใน Modifier.sharedElement() ซึ่งจะเป็นตําแหน่ง Rect เริ่มต้นและตําแหน่ง Rect เป้าหมาย

เช่น หากต้องการให้ข้อความในตัวอย่างก่อนหน้านี้เคลื่อนไหวเป็นเส้นโค้ง ให้ระบุพารามิเตอร์ boundsTransform เพื่อใช้ข้อกำหนด keyframes

val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
    keyframes {
        durationMillis = boundsAnimationDurationMillis
        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
        targetBounds at boundsAnimationDurationMillis
    }
}
Text(
    "Cupcake", fontSize = 28.sp,
    modifier = Modifier.sharedBounds(
        rememberSharedContentState(key = "title"),
        animatedVisibilityScope = animatedVisibilityScope,
        boundsTransform = textBoundsTransform
    )
)CustomizeSharedElementsSnippets.kt

คุณใช้ AnimationSpec ใดก็ได้ ตัวอย่างนี้ใช้ข้อกำหนด keyframes

รูปที่ 1 ตัวอย่างที่แสดงboundsTransformพารามิเตอร์

ที่แตกต่างกัน

โหมดปรับขนาด

เมื่อสร้างภาพเคลื่อนไหวระหว่างขอบเขตที่แชร์ 2 รายการ คุณสามารถตั้งค่าพารามิเตอร์ resizeMode เป็น RemeasureToBounds หรือ ScaleToBounds พารามิเตอร์นี้จะกำหนดลักษณะการเปลี่ยนองค์ประกอบที่แชร์ระหว่าง 2 สถานะ ScaleToBounds แรก measured the child layout with the lookahead (or target) constraints. จากนั้นระบบจะปรับขนาดเลย์เอาต์ที่เสถียรของรายการย่อยให้พอดีกับขอบเขตที่แชร์ ScaleToBounds เปรียบเสมือน "มาตราส่วนกราฟิก" ระหว่างสถานะต่างๆ

ในทางตรงกันข้าม RemeasureToBounds จะวัดและจัดเรียงเลย์เอาต์ย่อยของ sharedBounds อีกครั้งด้วยข้อจำกัดแบบคงที่ที่เคลื่อนไหวตามขนาดเป้าหมาย การวัดผลอีกครั้งจะทริกเกอร์โดยการเปลี่ยนแปลงขนาดขอบเขต ซึ่งอาจเกิดขึ้นทุกเฟรม

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

ความแตกต่างระหว่างโหมดปรับขนาด 2 โหมดนี้แสดงอยู่ในตัวอย่างต่อไปนี้

`ScaleToBounds`	`RemeasureToBounds`

ข้ามไปยังเลย์เอาต์สุดท้าย

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

ตัวอย่างต่อไปนี้แสดงข้อความอธิบาย "Lorem Ipsum" ที่ปรากฏบนหน้าจอ 2 วิธี ในตัวอย่างที่ 1 ข้อความจะจัดเรียงใหม่เมื่อเข้าสู่คอนเทนเนอร์ที่มีขนาดใหญ่ขึ้น ในตัวอย่างที่ 2 ข้อความจะไม่จัดเรียงใหม่เมื่อมีขนาดเพิ่มขึ้น การเพิ่ม Modifier.skipToLookaheadSize() จะช่วยป้องกันการจัดเรียงใหม่เมื่อข้อความมีความยาวมากขึ้น

ไม่มี `Modifier.skipToLookahead()` - สังเกตการเรียงบรรทัดข้อความ "Lorem Ipsum"	`Modifier.skipToLookahead()` - สังเกตว่าข้อความ "Lorem Ipsum" คงสถานะสุดท้ายไว้ที่จุดเริ่มต้นของภาพเคลื่อนไหว

คลิปและการซ้อนทับ

เพื่อให้องค์ประกอบที่แชร์ใช้ร่วมกันได้ระหว่างคอมโพสิเบิลต่างๆ ระบบจะยกระดับการแสดงผลของคอมโพสิเบิลให้อยู่ในการวางซ้อนเลเยอร์เมื่อเริ่มการเปลี่ยนไปยังรายการที่ตรงกันในปลายทาง ผลที่ได้คือ องค์ประกอบจะหนีขอบเขตขององค์ประกอบหลักและการเปลี่ยนรูปแบบเลเยอร์ (เช่น อัลฟาและมาตราส่วน)

องค์ประกอบดังกล่าวจะแสดงผลบนองค์ประกอบ UI อื่นๆ ที่ไม่ได้แชร์ เมื่อการเปลี่ยนเสร็จสิ้นแล้ว ระบบจะวางองค์ประกอบจากการวางซ้อนลงใน DrawScope ขององค์ประกอบนั้น

หากต้องการตัดองค์ประกอบที่แชร์เป็นรูปทรง ให้ใช้ฟังก์ชัน Modifier.clip() แบบมาตรฐาน วางไว้หลัง sharedElement()

Image(
    painter = painterResource(id = R.drawable.cupcake),
    contentDescription = "Cupcake",
    modifier = Modifier
        .size(100.dp)
        .sharedElement(
            rememberSharedContentState(key = "image"),
            animatedVisibilityScope = this@AnimatedContent
        )
        .clip(RoundedCornerShape(16.dp)),
    contentScale = ContentScale.Crop
)CustomizeSharedElementsSnippets.kt

หากต้องการให้แน่ใจว่าองค์ประกอบที่แชร์จะไม่แสดงผลนอกคอนเทนเนอร์หลัก ให้ตั้งค่า clipInOverlayDuringTransition ใน sharedElement() โดยค่าเริ่มต้น clipInOverlayDuringTransition จะใช้เส้นทางคลิปจาก sharedBounds() หลักสำหรับขอบเขตที่แชร์แบบซ้อนกัน

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

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

ไม่มี `Modifier.renderInSharedTransitionScopeOverlay()`	ด้วย `Modifier.renderInSharedTransitionScopeOverlay()`

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

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)CustomizeSharedElementsSnippets.kt

รูปที่ 2 แถบด้านล่างของแอปเลื่อนเข้าและออกขณะที่ภาพเคลื่อนไหวเปลี่ยนเฟรม

ในกรณีที่ไม่บ่อยนักที่คุณต้องการไม่ให้องค์ประกอบที่แชร์แสดงผลในการวางซ้อน คุณสามารถตั้งค่า renderInOverlayDuringTransition ใน sharedElement() เป็น false

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

โดยค่าเริ่มต้น sharedBounds() และ sharedElement() จะไม่แจ้งให้คอนเทนเนอร์หลักทราบถึงการเปลี่ยนแปลงขนาดเมื่อเลย์เอาต์เปลี่ยน

หากต้องการเผยแพร่การเปลี่ยนแปลงขนาดไปยังคอนเทนเนอร์หลักขณะที่เปลี่ยน ให้เปลี่ยนพารามิเตอร์ placeHolderSize เป็น PlaceHolderSize.animatedSize ซึ่งจะทำให้รายการขยายหรือหด รายการอื่นๆ ทั้งหมดในเลย์เอาต์จะตอบสนองต่อการเปลี่ยนแปลง

PlaceholderSize.contentSize (ค่าเริ่มต้น)

PlaceholderSize.animatedSize

(สังเกตว่ารายการอื่นๆ ในรายการเลื่อนลงอย่างไรเมื่อรายการหนึ่งเติบโตขึ้น)

ภาพรวม

Use Case ทั่วไป