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

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

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

Часто для асинхронной загрузки изображений используются библиотеки, например composable-функция AsyncImage библиотеки Coil. Чтобы обеспечить плавный переход между двумя элементами composable, рекомендуется задать для 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 для общих переходов.