Kasus penggunaan elemen bersama yang umum

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

Gambar asinkron

Biasanya, 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
        )
)
SharedElementCommonUseCaseSnippets.kt

Teks

Untuk menganimasikan perubahan fontSize, gunakan Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Transisi ini membuat perubahan ukuran menjadi 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() atau Modifier.wrapContentWidth() daripada menggunakan TextAlign yang berbeda untuk transisi bersama.