共用元素的常見用途

為共用元素建立動畫效果時,某些特定用途 特定的最佳化建議。

非同步圖片

常見的做法是使用程式庫以非同步方式載入圖片,例如當 使用 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