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

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

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

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