Распространенные варианты использования общих элементов

При анимации общих элементов существуют определенные сценарии использования, для которых требуются конкретные рекомендации.

Асинхронные изображения

Часто для асинхронной загрузки изображения используется библиотека, например, при использовании компонуемого объекта AsyncImage из библиотеки Coil . Для обеспечения бесперебойной работы между двумя компонуемыми объектами рекомендуется установить для методов placeholderMemoryCacheKey() и memoryCacheKey() один и тот же ключ, представляющий собой строку, производную от ключа общего элемента, так чтобы ключ кэша был одинаковым для соответствующих общих элементов. Новый общий элемент будет использовать кэш своего соответствующего элемента в качестве заполнителя до тех пор, пока не загрузит новое изображение.

Типичный пример использования 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

Текст

Для анимации изменения fontSize используйте Modifier.sharedBounds() , resizeMode = ScaleToBounds() . Этот переход делает изменение размера относительно плавным. Параметр contentScale можно настроить для анимации определенного веса или стиля шрифта.

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

Изменения TextAlign по умолчанию не анимируются. Вместо этого используйте Modifier.wrapContentSize() или Modifier.wrapContentWidth() для общих переходов, а не разные значения TextAlign .