Typowe przypadki użycia elementów wspólnych

W przypadku animowania udostępnionych elementów występują pewne przypadki użycia, które mają określone rekomendacje.

Obrazy asynchroniczne

Do asynchronicznego wczytywania obrazu często używa się biblioteki, na przykład w przypadku funkcji kompozycyjnej AsyncImage Coil. Aby płynnie współdziałała między 2 komponentami kompozycyjnymi, najlepiej ustawić w placeholderMemoryCacheKey() i memoryCacheKey() ten sam klucz, co ciąg tekstowy pochodzący ze wspólnego klucza elementu. Dzięki temu klucz pamięci podręcznej będzie taki sam w przypadku pasujących elementów wspólnych. Do momentu załadowania nowego elementu nowy udostępniany element będzie używać pamięci podręcznej dopasowania jako obiektu zastępczego.

Oto typowe zastosowania 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
        )
)
SharedElementCommonUseCaseSnippets.kt

Tekst

Aby animować zmiany typu fontSize, użyj funkcji Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Dzięki temu zmiana rozmiaru będzie stosunkowo płynna. Parametr contentScale można dostosować, aby animować czcionkę o określonej grubości lub stylu.

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

Zmiany typu TextAlign domyślnie nie są animowane. Zamiast tego użyj parametru Modifier.wrapContentSize() / Modifier.wrapContentWidth(), aby korzystać z innych elementów TextAlign do wspólnych przejść.