I am trying to implement shared Transition element animation in my app sample.
with(sharedTransitionScope) {
val roundedCornerAnimation by animatedVisibilityScope.transition
.animateDp(label = "rounded corner") { enterExit: EnterExitState ->
when (enterExit) {
EnterExitState.PreEnter -> 0.dp
EnterExitState.Visible -> TMDb_8_dp
EnterExitState.PostExit -> TMDb_8_dp
}
}
Card(
shape = RoundedCornerShape(roundedCornerAnimation),
modifier = modifier
.sharedBounds(
sharedContentState = rememberSharedContentState(
key = TMDbSharedElementKey(
tmdbId = movie.id,
type = TMDbSharedElementType.Bounds
)
),
animatedVisibilityScope = animatedVisibilityScope,
boundsTransform = TMDbDetailBoundsTransform,
clipInOverlayDuringTransition = OverlayClip(
RoundedCornerShape(
roundedCornerAnimation
)
),
enter = fadeIn(),
exit = fadeOut()
)
The problem is when I return back from detail screen it displays CardView border with a delay, but in JetSnack sample app from Google we do not have this issue.
Do you know what I miss?
full source code is available here : https://github.com/alirezaeiii/TMDb-CMP-Playground
Instead of using Card
, I should use my customized Box :
@Composable
fun TMDbSurface(
modifier: Modifier = Modifier,
shape: Shape = RectangleShape,
color: Color = MaterialTheme.colors.background,
elevation: Dp = 0.dp,
content: @Composable () -> Unit,
) {
Box(
modifier = modifier
.shadow(elevation = elevation, shape = shape, clip = false)
.zIndex(elevation.value)
.background(
color = color,
shape = shape
).clip(shape)
) {
content.invoke()
}
}