Когда я использую Shared переход элемента, компоновка AnimatedVisibility, похоже, не работает, элементы просто появляются и выскакивают без анимации. Если я удалю часть кода, связанную с переходом общего элемента, AnimatedVisibility снова будет работать как положено.
Я создал простой код, в котором вы можете увидеть, как выглядят мои макеты. На самом деле он содержит не все элементы, а только минимальные.
Код: Выделить всё
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun MainScreen(modifier: Modifier = Modifier) {
var isExpanded by remember {
mutableStateOf(false)
}
val totalDuration = 2000
val height by animateDpAsState(
targetValue = if (isExpanded) 200.dp else 400.dp,
animationSpec = tween(durationMillis = totalDuration)
)
Column(
modifier = modifier
) {
Spacer(modifier = Modifier.weight(1f))
SharedTransitionLayout {
AnimatedContent(targetState = isExpanded) { targetState ->
Box(
modifier = Modifier
.padding(8.dp)
.height(height)
.background(Color.LightGray)
) {
Layout1(
onButtonClick = {
isExpanded = !isExpanded
},
isExpanded = targetState,
animatedVisibilityScope = this@AnimatedContent
)
Layout2(
onButtonClick = {
isExpanded = !isExpanded
},
isExpanded = targetState,
animatedVisibilityScope = this@AnimatedContent
)
}
}
}
}
}
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun SharedTransitionScope.Layout1(
modifier: Modifier = Modifier,
onButtonClick: () -> Unit,
isExpanded: Boolean,
animatedVisibilityScope: AnimatedVisibilityScope
) {
Column(
modifier = modifier
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier.fillMaxWidth()
) {
if (isExpanded) {
Text(
color = Color.Black,
modifier = Modifier
.sharedBounds(
rememberSharedContentState(key = "text"),
animatedVisibilityScope = animatedVisibilityScope,
enter = fadeIn(
animationSpec = tween(2000)
),
exit = fadeOut(
animationSpec = tween(2000)
)
),
fontSize = 18.sp,
text = "Animated"
)
}
}
Spacer(modifier = Modifier.weight(1f))
AnimatedVisibility(
visible = !isExpanded,
enter = fadeIn(
animationSpec = tween(durationMillis = 1200)
),
exit = fadeOut(
animationSpec = tween(durationMillis = 800)
)
) {
Button(onClick = onButtonClick) {
Text(
color = Color.Black,
text = "Button 1"
)
}
}
}
}
@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun SharedTransitionScope.Layout2(
modifier: Modifier = Modifier,
onButtonClick: () -> Unit,
isExpanded: Boolean,
animatedVisibilityScope: AnimatedVisibilityScope
) {
Column(
modifier = modifier
.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Spacer(modifier = Modifier.weight(1f))
if (!isExpanded) {
Text(
color = Color.Black,
modifier = Modifier
.sharedBounds(
rememberSharedContentState(key = "text"),
animatedVisibilityScope = animatedVisibilityScope,
enter = fadeIn(
animationSpec = tween(2000)
),
exit = fadeOut(
animationSpec = tween(2000)
)
),
fontSize = 55.sp,
text = "Animated"
)
}
Spacer(modifier = Modifier.weight(1f))
AnimatedVisibility(
visible = isExpanded,
enter = fadeIn(
animationSpec = keyframes {
durationMillis = 2000
0.0f at 0
0.8f at 0
1f at 1
}
),
exit = fadeOut(
animationSpec = tween(800)
)
) {
Row(modifier = Modifier.fillMaxWidth()) {
Button(onClick = onButtonClick) {
Text(
color = Color.Black,
text = "Button 2 with more text"
)
}
}
}
}
}
Если я что-то пропустил, дайте мне знать, но если у вас есть идеи, как мне следует это сделать сделать анимацию без перехода общего элемента, это тоже хорошо для меня.
Подробнее здесь: https://stackoverflow.com/questions/790 ... transition
Мобильная версия