為共用元素建立動畫效果時,某些特定用途 特定的最佳化建議。
非同步圖片
常見的做法是使用程式庫以非同步方式載入圖片,例如當
使用 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 ) )
文字
如要為 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
。