Переход общего элемента: запуск анимации сброса общего элемента при переходе. ⇐ Android

[Anonymous]

В настоящее время я экспериментирую с переходом общего элемента в Jetpack Compose и столкнулся с проблемой.
Проблема: Запущенная анимация внутри общего элемента сбрасывается при переходе общего элемента.
Код для воспроизведения:

Код: Выделить всё

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun SharedTransition(modifier: Modifier = Modifier) {
var inLeft by remember { mutableStateOf(true) }

SharedTransitionLayout(modifier) {
AnimatedContent(
modifier = Modifier.clickable { inLeft = !inLeft },
targetState = inLeft
) { targetState ->
if (targetState) {
Box(
contentAlignment = Alignment.CenterStart,
modifier = Modifier.fillMaxWidth()
) {
AnimatedBox(
sharedTransitionScope = this@SharedTransitionLayout,
animatedContentScope = this@AnimatedContent,
)
}
} else {
Box(
contentAlignment = Alignment.CenterEnd,
modifier = Modifier.fillMaxWidth()
) {
AnimatedBox(
sharedTransitionScope = this@SharedTransitionLayout,
animatedContentScope = this@AnimatedContent,
)
}
}
}
}
}

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun AnimatedBox(
sharedTransitionScope: SharedTransitionScope,
animatedContentScope: AnimatedContentScope,
modifier: Modifier = Modifier
) {
with(sharedTransitionScope) {
val transition = rememberInfiniteTransition()
val color by transition.animateColor(
initialValue = Color.Green,
targetValue = Color.Black,
animationSpec = infiniteRepeatable(
tween(durationMillis = 1500, easing = LinearEasing),
RepeatMode.Reverse,
),
)

Box(
modifier
.size(BoxSize)
.sharedElement(
rememberSharedContentState(key = "animated_box"),
animatedContentScope,
)
.background(color)
)
}
}

private val BoxSize = 48.dp

Это приводит к следующему:


Анимация должна медленно плавно переходить от зеленого к черному — вперед и назад. Но когда переход запускается нажатием, анимация переходит к исходному ярко-зеленому цвету.
Лучше всего это видно на видео, когда поле находится с правой стороны.
Я ожидал, что анимация не будет перезапущена при переходе.
Я попробовал обернуть анимированный элемент в movableContentOf { , но результат тот же:

Код: Выделить всё

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
private fun MovableContentSharedTransition(modifier: Modifier = Modifier) {
val animatedBox =
remember {
movableContentWithReceiverOf { animatedContentScope ->
val transition = rememberInfiniteTransition()
val color by transition.animateColor(
initialValue = Color.Magenta,
targetValue = Color.Black,
animationSpec = infiniteRepeatable(
tween(durationMillis = 1500, easing = LinearEasing),
RepeatMode.Reverse,
),
)

Box(
Modifier
.size(48.dp)
.sharedElement(
rememberSharedContentState(key = "animated_box"),
animatedContentScope,
)
.background(color)
)
}
}

var inLeft by remember { mutableStateOf(true) }

SharedTransitionLayout {
AnimatedContent(
modifier = modifier.clickable { inLeft = !inLeft },
targetState = inLeft
) { targetState ->
if (targetState) {
Box(
contentAlignment = Alignment.CenterStart,
modifier = Modifier.fillMaxWidth()
) {
animatedBox(this@SharedTransitionLayout, this@AnimatedContent)
}
} else {
Box(
contentAlignment = Alignment.CenterEnd,
modifier = Modifier.fillMaxWidth()
) {
animatedBox(this@SharedTransitionLayout, this@AnimatedContent)
}
}
}
}
}

Составьте версию спецификации: "androidx.compose:compose-bom:2024.09.02".
Есть ли способ сохранить анимация работает? Решаема ли эта проблема с помощью moveableContentOf { ?

Полный код: https://github.com/aruh/shared-element-transition- анимация-сброс-образец

Подробнее здесь: https://stackoverflow.com/questions/790 ... on-transit