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

Często używa się biblioteki do asynchronicznego wczytywania obrazu, np. podczas korzystania z 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 udostępnionego elementu, tak aby klucz pamięci podręcznej był taki sam dla dopasowanych udostępnionych elementów. 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() z resizeMode = SharedTransitionScope.ResizeMode.scaleToBounds(). Dzięki temu przejście jest płynne. 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ść.