Typowe przypadki użycia elementów wspólnych

Podczas animowania udostępnionych elementów występują określone przypadki użycia, w których obowiązują specjalne zalecenia.

Obrazy asynchroniczne

Często używa się biblioteki do asynchronicznego wczytywania obrazu, np. gdy używasz elementu kompozycyjnego AsyncImage z biblioteki Coil. Aby zapewnić płynne działanie między 2 elementami kompozycyjnymi, zalecamy ustawienie placeholderMemoryCacheKey() i memoryCacheKey() na ten sam klucz jako ciąg znaków pochodzący z klucza udostępnionego elementu. Dzięki temu klucz pamięci podręcznej będzie taki sam w przypadku pasujących udostępnionych elementów. Nowy udostępniony element będzie używać pamięci podręcznej swojego odpowiednika jako elementu zastępczego, dopóki nie wczyta nowego obrazu.

Typowe użycie AsyncImage wygląda tak:

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ć fontSize zmiany, użyj Modifier.sharedBounds(), resizeMode = ScaleToBounds(). Ta przejście sprawia, że 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() zamiast używać różnych TextAlign w przypadku przejść udostępnionych.