为了自定义共享元素转场动画的运行方式,可以使用一些参数来更改共享元素的转场方式。
动画规范
要更改用于大小和位置移动的动画规范,您可以在 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 ) )
您可以使用任何 AnimationSpec
。此示例使用 keyframes
规范。
boundsTransform
参数的示例调整大小模式
在两个共享边界之间进行动画处理时,您可以将 resizeMode
参数设置为 RemeasureToBounds
或 ScaleToBounds
。此参数决定了共享元素如何在两种状态之间转场。ScaleToBounds
首先使用前瞻(或目标)约束来测量子布局。然后,子布局的稳定布局会缩放以适应共享边界。ScaleToBounds
可以被视为状态之间的“图形缩放”。
相比之下,RemeasureToBounds
会根据目标大小,使用动画固定约束重新测量和重新布局 sharedBounds
的子布局。重新测量是由边界大小变化触发的,这可能发生在每一帧。
对于 Text
可组合项,建议使用 ScaleToBounds
,因为它避免了文本重新布局和重新流式排布到不同的行。RemeasureToBounds
建议用于具有不同宽高比的边界,以及如果您希望两个共享元素之间具有流畅的连续性。
两种调整大小模式之间的区别可以在以下示例中看到
|
|
---|---|
跳到最终布局
默认情况下,在两个布局之间转场时,布局大小会在其起始状态和最终状态之间进行动画处理。在对文本等内容进行动画处理时,这可能是不希望出现的行为。
以下示例说明了描述文本“Lorem Ipsum”以两种不同方式进入屏幕。在第一个示例中,当容器大小增长时,文本会重新流式排布。在第二个示例中,文本在增长时不会重新流式排布。添加 Modifier.skipToLookaheadSize()
可防止其在增长时重新流式排布。
没有 |
使用 |
---|---|
剪裁和叠加层
为了使共享元素在不同的可组合项之间共享,可组合项的渲染会提升到图层叠加层,当转场开始匹配目标时。这样做的好处是它将跳出父项的边界及其图层变换(例如,透明度和缩放)。
它将渲染在其他非共享 UI 元素的顶部。转场完成后,该元素将从叠加层删除到其自己的 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 )
如果您需要确保共享元素永远不会在父容器之外渲染,您可以在 sharedElement()
上设置 clipInOverlayDuringTransition
。默认情况下,对于嵌套的共享边界,clipInOverlayDuringTransition
使用来自父级 sharedBounds()
的剪裁路径。
为了支持在共享元素转场期间始终将特定 UI 元素(例如底部栏或浮动操作按钮)保持在顶部,请使用 Modifier.renderInSharedTransitionScopeOverlay()
。默认情况下,此修饰符在共享转场处于活动状态期间将内容保留在叠加层中。
例如,在 Jetsnack 中,BottomAppBar
需要放置在共享元素的顶部,直到屏幕不可见。将修饰符添加到可组合项上可使其保持提升状态。
不使用 |
使用 |
---|---|
您可能希望您的非共享可组合项在转场之前也进行动画移出,并保持在其他可组合项的顶部。在这种情况下,请使用 renderInSharedTransitionScopeOverlay().animateEnterExit()
在共享元素转场运行时将可组合项动画移出。
JetsnackBottomBar( modifier = Modifier .renderInSharedTransitionScopeOverlay( zIndexInOverlay = 1f, ) .animateEnterExit( enter = fadeIn() + slideInVertically { it }, exit = fadeOut() + slideOutVertically { it } ) )
在极少数情况下,如果您不希望共享元素在叠加层中渲染,您可以将 sharedElement()
上的 renderInOverlayDuringTransition
设置为 false。
通知同级布局共享元素大小的变化
默认情况下,sharedBounds()
和 sharedElement()
在布局转场时不会通知父容器任何大小变化。
为了在转场时将大小变化传播到父容器,请将 placeHolderSize
参数更改为 PlaceHolderSize.animatedSize
。这样做会导致项目增长或缩小。布局中的所有其他项目都会响应此更改。
|
(请注意列表中其他项目如何响应单个项目增长而向下移动) |
---|---|