Kasus penggunaan elemen bersama yang umum

Saat menganimasikan elemen bersama, ada beberapa kasus penggunaan tertentu yang memiliki rekomendasi tertentu.

Gambar asinkron

Library biasanya 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 seperti string yang berasal dari kunci elemen bersama, sehingga kunci cache sama untuk elemen bersama yang cocok. Elemen bersama baru akan menggunakan cache pencocokannya 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
        )
)
SharedElementCommonUseCaseSnippets.kt

Teks

Untuk menganimasikan perubahan fontSize, gunakan Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Transisi ini membuat perubahan ukuran relatif lancar. Parameter contentScale dapat disesuaikan untuk menganimasikan ketebalan atau gaya 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()
        )
)
SharedElementCommonUseCaseSnippets.kt

Perubahan TextAlign tidak dianimasikan secara default. Sebagai gantinya, gunakan Modifier.wrapContentSize() / Modifier.wrapContentWidth(), bukan menggunakan TextAlign yang berbeda untuk transisi bersama.