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

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

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

Обычно для асинхронной загрузки изображения используется библиотека, например, при использовании Composable 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 для общих переходов.