Kasus penggunaan elemen bersama yang umum

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

Gambar asinkron

Sangat umum menggunakan library untuk memuat gambar secara asinkron, seperti saat menggunakan composable AsyncImage Coil. Agar dapat berfungsi dengan lancar di antara dua composable, sebaiknya setel placeholderMemoryCacheKey() dan memoryCacheKey() ke kunci yang sama dengan string yang berasal dari kunci elemen bersama, sehingga kunci cache sama untuk elemen bersama yang cocok. Elemen bersama yang baru akan menggunakan cache pencocokannya sebagai placeholder hingga elemen tersebut memuat gambar baru.

Penggunaan standar 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 TextAlign yang berbeda, untuk transisi bersama.