為共用元素建立動畫效果時,某些用途會有具體的建議。
非同步圖片
使用程式庫以非同步方式載入圖片是很常見的情況,例如使用 Coil 的 AsyncImage
可組合項時。為了讓兩個可組合項之間順暢運作,建議您將 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 ) )
Text
如要為 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
。