Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

自定义共享元素过渡

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

动画规范

如需更改用于大小和位置移动的动画规范，您可以在 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 规范。

图 1. 显示不同 boundsTransform 参数的示例

调整大小模式

在两个共享边界之间添加动画效果时，您可以将 resizeMode 参数设置为 RemeasureToBounds 或 ScaleToBounds。此参数决定了共享元素在两种状态之间如何过渡。ScaleToBounds 首先使用 Lookahead（或目标）约束条件测量子布局。然后，子级的稳定布局会缩放以适应共享边界。 ScaleToBounds 可以被视为状态之间的“图形比例”。

相比之下，RemeasureToBounds 会根据目标大小，使用动画固定约束条件重新测量和重新布局 sharedBounds 的子布局。重新测量由边界大小变化触发，这可能会在每一帧中发生。

对于 Text 可组合项，建议使用 ScaleToBounds，因为这样可以避免重新布局和文本重排到不同的行。如果边界具有不同的宽高比，并且您希望两个共享元素之间具有流畅的连续性，建议使用 RemeasureToBounds。

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

`ScaleToBounds`	`RemeasureToBounds`

动态启用和停用共享元素

默认情况下，sharedElement() 和 sharedBounds() 配置为只要在目标状态中找到匹配的键，就会为布局更改添加动画效果。不过，您可能希望根据特定条件（例如导航方向或当前界面状态）动态停用此动画。

如需控制是否发生共享元素过渡，您可以自定义传递给 rememberSharedContentState() 的 SharedContentConfig。isEnabled 属性用于确定共享元素是否处于活跃状态。

以下示例演示了如何定义一个配置，以便仅在特定屏幕之间导航时（例如，仅从 A 到 B）启用共享过渡，而在其他情况下停用共享过渡。

SharedTransitionLayout {
    val transition = updateTransition(currentState)
    transition.AnimatedContent { targetState ->
        // Create the configuration that depends on state changing.
        fun animationConfig() : SharedTransitionScope.SharedContentConfig {
            return object : SharedTransitionScope.SharedContentConfig {
                override val SharedTransitionScope.SharedContentState.isEnabled: Boolean
                    // For this example, we only enable the transition in one direction
                    // from A -> B and not the other way around.
                    get() =
                        transition.currentState == "A" && transition.targetState == "B"
            }
        }
        when (targetState) {
            "A" -> Box(
                modifier = Modifier
                    .sharedElement(
                        rememberSharedContentState(
                            key = "shared_box",
                            config = animationConfig()
                        ),
                        animatedVisibilityScope = this
                    )
                    // ...
            ) {
                // Your content
            }
            "B" -> {
                Box(
                    modifier = Modifier
                        .sharedElement(
                            rememberSharedContentState(
                                key = "shared_box",
                                config = animationConfig()
                            ),
                            animatedVisibilityScope = this
                        )
                        // ...
                ) {
                    // Your content
                }
            }
        }
    }
}CustomizeSharedElementsSnippets.kt

默认情况下，如果在动画进行期间停用共享元素，该元素仍会完成当前正在进行的动画，以防止意外移除正在进行的动画。如果您需要在动画播放期间移除元素，可以替换 SharedContentConfig 接口中的 shouldKeepEnabledForOngoingAnimation 以返回 false。

跳至最终布局

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

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

没有 `Modifier.skipToLookaheadSize()` - 请注意“Lorem Ipsum”文本重排	`Modifier.skipToLookaheadSize()` - 请注意，“Lorem Ipsum”文本在动画开始时保持其最终状态

片段和叠加层

为了让共享元素在不同的可组合项之间共享，当开始过渡到目标位置中的匹配项时，可组合项的渲染会提升到图层叠加层中。这样做的效果是，它会超出父级的边界及其层转换（例如 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