Beenden Sie den Übergang des gemeinsam genutzten Elements von Jetpack, das nicht funktioniert ⇐ Android

[Anonymous]

Ich entwickle eine Anwendung in komponierter Multiplattform, bei der ich gemeinsame Elementübergänge zwischen zwei Bildschirmen implementieren: Ein Hauptbildschirm mit mehreren Bildern (Hauptbildschirmen) und einer Vollbild-Bildansicht (Vollbildmaterial). Die Animation vom Hauptbildschirm zum Vollbildschirm funktioniert einwandfrei, aber vom Vollbildmodus zum Hauptbildschirm nicht, da keine Animation angezeigt wird. Dies ist der Code, den ich gemacht habe: < /p>

Code: Select all

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun ImagesTest(){

val images = remember { mutableListOf(Res.drawable.im_test, Res.drawable.im_test_2) }

var enlargeImage: DrawableResource? by remember { mutableStateOf(value = null) }

var showImageFullScreen by remember { mutableStateOf(value = false) }

SharedTransitionLayout {
AnimatedContent(
targetState = showImageFullScreen, label = "ImageTransition"
) { isImageFullScreen ->
if (!isImageFullScreen) {
MainScreenImages(
imagesList = images,
onImageClick = {
enlargeImage = it
showImageFullScreen = true
},
transitionScope = this@SharedTransitionLayout,
animatedVisibilityScope = this@AnimatedContent
)
} else {
enlargeImage?.let {
FullScreenImage(
enlargeImage = it,
closeFullImage = {
enlargeImage = null
showImageFullScreen = false
},
transitionScope = this@SharedTransitionLayout,
animatedVisibilityScope = this@AnimatedContent
)
}
}
}

}
}

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun MainScreenImages(
imagesList: List,
onImageClick: (DrawableResource) -> Unit,
transitionScope: SharedTransitionScope,
animatedVisibilityScope: AnimatedVisibilityScope
) {
Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
LazyRow(
contentPadding = PaddingValues(horizontal = 8.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {

items(imagesList, key = { it.hashCode() }) { image ->
with(transitionScope) {
Image(
painter = painterResource(image),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(100.dp)
.clip(MaterialTheme.shapes.small)
.sharedElement(
state = rememberSharedContentState(key = image.hashCode()),
animatedVisibilityScope = animatedVisibilityScope
)
.clickable {
onImageClick(image)
}
)
}

}
}
}
}

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun FullScreenImage(
enlargeImage: DrawableResource,
closeFullImage: () -> Unit,
transitionScope: SharedTransitionScope,
animatedVisibilityScope: AnimatedVisibilityScope
) {

Column(
modifier = Modifier
.fillMaxSize()
.background(Color.Black.copy(alpha = 0.8f))
.clickable { closeFullImage() },
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {

Spacer(modifier = Modifier.weight(1f))

with(transitionScope) {

Image(
painter = painterResource(enlargeImage),
contentDescription = null,
contentScale = ContentScale.Fit,
modifier = Modifier
.fillMaxWidth()
.weight(1f)
.padding(horizontal = 16.dp)
.sharedElement(
state = rememberSharedContentState(key = enlargeImage.hashCode()),
animatedVisibilityScope = animatedVisibilityScope
)
)

}

Spacer(modifier = Modifier.weight(1f))
}
}

Dies ist ein GIF, in dem Sie sehen können, was passiert: