Почему AnimatedVisibility не работает при использовании перехода общего элемента?Android

Форум для тех, кто программирует под Android
Ответить
Anonymous
 Почему AnimatedVisibility не работает при использовании перехода общего элемента?

Сообщение Anonymous »

Итак, я хочу сделать несколько анимаций, большинство элементов анимированы с помощью AnimatedVisibility Composable, но для двух текстов мне также нужно использовать переход общего элемента.
Когда я использую 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"
)
}
}
}
}
}
Причина, по которой я хочу использовать переход общего элемента, заключается в том, что у меня есть два текста, только один из них будет виден, но когда я меняю состояние (isExpanded), один текст должен анимировать в другой, поэтому также размер и положение шрифта. Поскольку для каждой версии мне приходится использовать два разных компонента, я не могу написать анимацию с нуля.
Если я что-то пропустил, дайте мне знать, но если у вас есть идеи, как мне следует это сделать сделать анимацию без перехода общего элемента, это тоже хорошо для меня.

Подробнее здесь: https://stackoverflow.com/questions/790 ... transition
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Android»