Kasus penggunaan elemen bersama yang umum
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Saat menganimasikan elemen bersama, ada beberapa kasus penggunaan tertentu yang memiliki rekomendasi spesifik.
Gambar asinkron
Umumnya, library digunakan untuk memuat gambar secara asinkron, seperti saat
menggunakan composable AsyncImage Coil.
Agar dapat berfungsi dengan lancar di antara dua composable, sebaiknya tetapkan
placeholderMemoryCacheKey() dan memoryCacheKey() ke kunci yang sama sebagai string
yang berasal dari kunci elemen bersama, sehingga kunci cache sama untuk
elemen bersama yang cocok. Elemen bersama yang baru akan menggunakan cache kecocokannya
sebagai placeholder hingga memuat gambar baru.
Penggunaan umum untuk AsyncImage adalah sebagai berikut:
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
)
)
Teks
Untuk menganimasikan perubahan fontSize, gunakan Modifier.sharedBounds(), resizeMode =
ScaleToBounds(). Transisi ini membuat perubahan ukuran
relatif lancar. Parameter contentScale dapat disesuaikan untuk menganimasikan
gaya atau ketebalan font tertentu.
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()
)
)
Perubahan TextAlign tidak dianimasikan secara default. Sebagai gantinya, gunakan
Modifier.wrapContentSize() atau Modifier.wrapContentWidth() daripada menggunakan
TextAlign yang berbeda untuk transisi bersama.
Konten dan contoh kode di halaman ini tunduk kepada lisensi yang dijelaskan dalam Lisensi Konten. Java dan OpenJDK adalah merek dagang atau merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-08-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2025-08-27 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."]]
