Typowe przypadki użycia elementów wspólnych

W pewnych szczególnych przypadkach animowania elementów udostępnionych konkretne zalecenia.

Obrazy asynchroniczne

Do asynchronicznego wczytywania obrazu używa się często biblioteki, na przykład za pomocą funkcji kompozycyjnej AsyncImage obiektu Coil. Aby płynnie współdziałać między 2 komponentami kompozycyjnymi, zalecamy ustawienie atrybutu placeholderMemoryCacheKey() i memoryCacheKey() do tego samego klucza co ciąg znaków wyodrębniony z klucza udostępnionego elementu, tak aby klucz pamięci podręcznej był taki sam dla argumentu które pasują do udostępnionych elementów. Nowy udostępniony element będzie używał pamięci podręcznej dopasowania .

Typowe użycie funkcji AsyncImage jest następujące:

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 elementu fontSize, użyj elementów Modifier.sharedBounds(), resizeMode = ScaleToBounds(). To przejście powoduje zmianę rozmiaru zmieniają się względnie płynnie. Parametr contentScale można dostosować, aby był animowany 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 (TextAlign) nie są domyślnie animowane. Zamiast tego użyj Modifier.wrapContentSize() / Modifier.wrapContentWidth() ponad przy użyciu innych TextAlign w przypadku wspólnych przejść.