共享元素常用案例

在动画化共享元素时，某些特定用例有一些具体的建议。

异步图像

通常使用库异步加载图像，例如使用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。

自定义

使用导航