自定义共享元素过渡

如需自定义共享元素过渡动画的运行方式，可以使用一些参数来更改共享元素的过渡方式。

动画规范

如需更改用于尺寸和位置移动的动画规范，您可以在 Modifier.sharedElement() 上指定不同的 boundsTransform 参数。这会提供初始 Rect 位置和目标 Rect 位置。

例如，如需使上例中的文本随弧形运动一起移动，请指定 boundsTransform 参数以使用 keyframes 规范：

val textBoundsTransform = BoundsTransform { initialBounds, targetBounds ->
    keyframes {
        durationMillis = boundsAnimationDurationMillis
        initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing
        targetBounds at boundsAnimationDurationMillis
    }
}
Text(
    "Cupcake", fontSize = 28.sp,
    modifier = Modifier.sharedBounds(
        rememberSharedContentState(key = "title"),
        animatedVisibilityScope = animatedVisibilityScope,
        boundsTransform = textBoundsTransform
    )
)
CustomizeSharedElementsSnippets.kt

您可以使用任何 AnimationSpec。此示例使用了 keyframes 规范。

调整大小模式

在两个共享边界之间添加动画效果时，您可以将 resizeMode 参数设置为 RemeasureToBounds 或 ScaleToBounds。此参数确定共享元素如何在两种状态之间转换。ScaleToBounds 首先测量具有先行（或目标）约束条件的子布局。然后，子项的稳定布局会进行缩放，以适应共享边界。ScaleToBounds 可以视为各种状态之间的“图形比例”。

而 RemeasureToBounds 会根据目标尺寸使用动画形式的固定约束条件重新测量并重新布局 sharedBounds 的子布局。边界大小的变化（可能是每一帧）都会触发重新测量。

对于 Text 可组合项，建议使用 ScaleToBounds，因为它可以避免文本在不同的行中进行重新布局和重排。如果边界的宽高比不同，或者您希望两个共享元素之间保持流畅的连续性，建议您使用 RemeasureToBounds。

以下示例展示了这两种大小调整模式之间的区别：

ScaleToBounds	RemeasureToBounds

跳至最终布局

默认情况下，在两种布局之间切换时，布局尺寸会在其起始状态和最终状态之间以动画形式呈现。在为文本等内容添加动画效果时，这可能是不希望出现的行为。

以下示例展示了说明文本“Lorem Ipsum”以两种不同方式进入屏幕。在第一个示例中，文本随着容器大小的增加而自动重排；第二个示例当文本增大时，文本不会自动重排。添加 Modifier.skipToLookaheadSize() 可防止自动重排。

无 Modifier.skipToLookahead() - 请注意“Lorem Ipsum”文本重排	Modifier.skipToLookahead() - 请注意，“Lorem Ipsum”文本会在动画开始时保留其最终状态

剪辑和叠加层

在 Compose 中创建共享元素时的一个重要概念是，为了让这些元素在不同的可组合项之间共享，当过渡开始且在目的地中匹配时，可组合项的渲染会提升为层叠加层。这样做的效果是，它将逃离父项的边界及其层转换（例如 alpha 值和缩放比例）。

它会在其他非共享界面元素之上呈现，当过渡完成后，该元素将从叠加层拖放到自己的 DrawScope 中。

如需将共享元素裁剪为形状，请使用标准的 Modifier.clip() 函数。请将其放置在 sharedElement() 之后：

Image(
    painter = painterResource(id = R.drawable.cupcake),
    contentDescription = "Cupcake",
    modifier = Modifier
        .size(100.dp)
        .sharedElement(
            rememberSharedContentState(key = "image"),
            animatedVisibilityScope = this@AnimatedContent
        )
        .clip(RoundedCornerShape(16.dp)),
    contentScale = ContentScale.Crop
)
CustomizeSharedElementsSnippets.kt

如果您需要确保共享元素绝不会在父容器之外呈现，可以在 sharedElement() 上设置 clipInOverlayDuringTransition。默认情况下，对于嵌套的共享边界，clipInOverlayDuringTransition 会使用父级 sharedBounds() 中的裁剪路径。

如需支持让特定界面元素（如底部栏或悬浮操作按钮）在共享元素过渡期间始终位于顶部，请使用 Modifier.renderInSharedTransitionScopeOverlay()。默认情况下，当共享过渡处于活动状态时，此修饰符会将内容保留在叠加层中。

例如，在 Jetsnack 中，需要将 BottomAppBar 放置在共享元素上，直到屏幕不可见。向可组合项添加修饰符可以使其保持提升状态。

未使用Modifier.renderInSharedTransitionScopeOverlay()	通过 Modifier.renderInSharedTransitionScopeOverlay()

有时，您可能希望非共享可组合项在过渡之前以动画形式消失，并且仍位于其他可组合项之上。在这种情况下，请在共享元素过渡运行时使用 renderInSharedTransitionScopeOverlay().animateEnterExit() 为可组合项添加动画效果：

JetsnackBottomBar(
    modifier = Modifier
        .renderInSharedTransitionScopeOverlay(
            zIndexInOverlay = 1f,
        )
        .animateEnterExit(
            enter = fadeIn() + slideInVertically {
                it
            },
            exit = fadeOut() + slideOutVertically {
                it
            }
        )
)
CustomizeSharedElementsSnippets.kt

在极少数情况下，如果您不希望共享元素在叠加层中呈现，可以将 sharedElement() 上的 renderInOverlayDuringTransition 设置为 false。

在共享元素大小更改时通知同级布局

默认情况下，sharedBounds() 和 sharedElement() 不会在布局转换时通知父级容器发生任何大小变化。

如需在父级容器转换时将大小更改传播到父级容器，请将 placeHolderSize 参数更改为 PlaceHolderSize.animatedSize。这样做会导致内容增大或缩小。布局中的所有其他项都会响应更改。

PlaceholderSize.contentSize（默认）	PlaceholderSize.animatedSize （请注意，随着一个项目的增长，列表中的其他项目是如何下移的）