Typowe przypadki użycia elementów wspólnych

Podczas animowania udostępnionych elementów istnieją pewne szczególne przypadki użycia, w których obowiązują konkretne zalecenia.

Obrazy asynchroniczne

Często używa się biblioteki do asynchronicznego wczytywania obrazu, np. gdy używasz kompozycji AsyncImage Coil. Aby zapewnić płynne działanie między dwoma funkcjami kompozycyjnymi, zalecamy ustawienie parametrów placeholderMemoryCacheKey() i memoryCacheKey() na ten sam klucz w postaci ciągu znaków pochodzącego z klucza elementu udostępnionego, tak aby klucz pamięci podręcznej był taki sam dla dopasowanych elementów udostępnionych. Nowy element udostępniony będzie używać pamięci podręcznej dopasowanego elementu jako elementu zastępczego, dopóki nie wczyta nowego obrazu.

Typowe zastosowanie parametru 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 fontSize, użyj Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Dzięki temu przejście jest stosunkowo 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żywaj Modifier.wrapContentSize() lub Modifier.wrapContentWidth(), a nie różnych TextAlign w przypadku udostępnianych przejść.