При анимации общих элементов существуют некоторые особые случаи использования, для которых существуют особые рекомендации.
Асинхронные изображения
Для асинхронной загрузки изображения часто используется библиотека, например, при использовании компонуемого объекта 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 ) )
Текст
Для анимации изменения 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() ) )
Изменения TextAlign
по умолчанию не анимируются. Вместо этого используйте Modifier.wrapContentSize()
или Modifier.wrapContentWidth()
вместо использования разных TextAlign
для общих переходов.