常见共享元素用例

为共享元素添加动画效果时，有一些特定的用例 提供具体的建议

异步图片

常见做法是使用库异步加载图片，例如 使用 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
        )
)
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 来实现共享转场效果。