กรณีการใช้งานองค์ประกอบที่ใช้ร่วมกันทั่วไป
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เมื่อสร้างภาพเคลื่อนไหวขององค์ประกอบที่แชร์ จะมี Use Case บางอย่างที่มี
คำแนะนำเฉพาะ
รูปภาพแบบอะซิงโครนัส
โดยทั่วไปแล้ว เรามักใช้ไลบรารีเพื่อโหลดรูปภาพแบบไม่พร้อมกัน เช่น เมื่อใช้คอมโพสของ CoilAsyncImage
หากต้องการให้ทำงานได้อย่างราบรื่นระหว่าง Composable 2 รายการ ขอแนะนำให้ตั้งค่า placeholderMemoryCacheKey() และ memoryCacheKey() เป็นคีย์เดียวกันในรูปแบบสตริง
ที่ได้มาจากคีย์ขององค์ประกอบที่ใช้ร่วมกัน เพื่อให้คีย์แคชเหมือนกันสำหรับ
องค์ประกอบที่ใช้ร่วมกันที่ตรงกัน องค์ประกอบที่แชร์ใหม่จะใช้แคชขององค์ประกอบที่ตรงกัน
เป็นตัวยึดตำแหน่งจนกว่าจะโหลดรูปภาพใหม่
การใช้งาน AsyncImage โดยทั่วไปมีดังนี้
AsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data("your-image-url")
.crossfade(true)
.placeholderMemoryCacheKey("image-key") // same key as shared element key
.memoryCacheKey("image-key") // same key as shared element key
.build(),
placeholder = null,
contentDescription = null,
modifier = Modifier
.size(120.dp)
.sharedBounds(
rememberSharedContentState(
key = "image-key"
),
animatedVisibilityScope = this
)
)
ข้อความ
หากต้องการสร้างภาพเคลื่อนไหวfontSizeการเปลี่ยนแปลง ให้ใช้ Modifier.sharedBounds(), resizeMode =
ScaleToBounds() การเปลี่ยนผ่านนี้ทำให้การเปลี่ยนขนาด
ค่อนข้างราบรื่น คุณปรับcontentScaleพารามิเตอร์เพื่อเคลื่อนไหว
น้ำหนักหรือรูปแบบแบบอักษรที่ต้องการได้
Text(
text = "This is an example of how to share text",
modifier = Modifier
.wrapContentWidth()
.sharedBounds(
rememberSharedContentState(
key = "shared Text"
),
animatedVisibilityScope = this,
enter = fadeIn(),
exit = fadeOut(),
resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()
)
)
TextAlign จะไม่เคลื่อนไหวโดยค่าเริ่มต้น แต่ให้ใช้ Modifier.wrapContentSize() หรือ Modifier.wrapContentWidth() แทนการใช้ TextAlign ที่แตกต่างกัน
สำหรับการเปลี่ยนฉากที่ใช้ร่วมกัน
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-23 UTC
[null,null,["อัปเดตล่าสุด 2025-08-23 UTC"],[],[],null,["When animating shared elements, there are some particular use cases that have\nspecific recommendations.\n\nAsynchronous images\n\nIt's common to use a library to load up an image asynchronously, such as when\nusing [Coil's `AsyncImage` composable](https://coil-kt.github.io/coil/compose/).\nFor it to work seamlessly between two composables, its recommended to set the\n`placeholderMemoryCacheKey()` and `memoryCacheKey()` to the same key as a string\nderived from the shared element key, such that the cache key is the same for the\nmatched shared elements. The new shared element will be using its match's cache\nas the placeholder until it loads the new image.\n\nThe typical usage for `AsyncImage` is as follows:\n\n\n```kotlin\nAsyncImage(\n model = ImageRequest.Builder(LocalContext.current)\n .data(\"your-image-url\")\n .crossfade(true)\n .placeholderMemoryCacheKey(\"image-key\") // same key as shared element key\n .memoryCacheKey(\"image-key\") // same key as shared element key\n .build(),\n placeholder = null,\n contentDescription = null,\n modifier = Modifier\n .size(120.dp)\n .sharedBounds(\n rememberSharedContentState(\n key = \"image-key\"\n ),\n animatedVisibilityScope = this\n )\n)https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedElementCommonUseCaseSnippets.kt#L47-L64\n```\n\n\u003cbr /\u003e\n\nText\n\nTo animate `fontSize` changes, use `Modifier.sharedBounds()`, `resizeMode =\nScaleToBounds()`. This transition makes the size\nchange relatively fluid. The `contentScale` parameter can be tweaked to animate\na specific font weight or style.\n\n\n```kotlin\nText(\n text = \"This is an example of how to share text\",\n modifier = Modifier\n .wrapContentWidth()\n .sharedBounds(\n rememberSharedContentState(\n key = \"shared Text\"\n ),\n animatedVisibilityScope = this,\n enter = fadeIn(),\n exit = fadeOut(),\n resizeMode = SharedTransitionScope.ResizeMode.ScaleToBounds()\n )\n)https://github.com/android/snippets/blob/5673ffc60b614daf028ee936227128eb8c4f9781/compose/snippets/src/main/java/com/example/compose/snippets/animations/sharedelement/SharedElementCommonUseCaseSnippets.kt#L84-L97\n```\n\n\u003cbr /\u003e\n\n`TextAlign` changes are **not** animated by default. Instead, use\n`Modifier.wrapContentSize()` or `Modifier.wrapContentWidth()` over using different\n`TextAlign` for shared transitions."]]
