Typowe przypadki użycia elementów wspólnych

W przypadku animowania elementów wspólnych istnieją pewne przypadki użycia, które mają określone zalecenia.

Obrazy asynchroniczne

Do asynchronicznego wczytywania obrazu często używa się biblioteki, np. funkcji kompozycyjnej AsyncImage biblioteki Coil. Aby działało to bezproblemowo między 2 komponentami, zalecamy ustawienie placeholderMemoryCacheKey() i memoryCacheKey() na ten sam klucz jako ciąg znaków pochodzący z klucza elementu wspólnego, tak aby klucz pamięci podręcznej był taki sam dla dopasowanych elementów wspólnych. Nowy element udostępniony będzie używać pamięci podręcznej dopasowania jako obiektu zastępczego, dopóki nie załaduje nowego obrazu.

Typowe zastosowanie 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 fontSize, użyj Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Dzięki temu przejściu zmiana rozmiaru jest stosunkowo płynna. Parametr contentScale można dostosować, aby animować określoną grubość lub styl czcionki.

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() lub Modifier.wrapContentWidth(), a nie różnych TextAlign w przypadku udostępnionych przejść.