Как синхронизировать анимацию нескольких строк в Jetpack Compose? ⇐ Android

[Anonymous]

Я работаю над приложением Jetpack Compose, в котором у меня есть несколько рядов компонентов, которые я хочу анимировать одновременно. Анимация в первом ряду (масштаб) отличается от второго ряда (CrossFade). Я реализовал концепцию, но время обеих анимаций разное.
В настоящее время вторая анимация начинается только после завершения первой. Мне нужно, чтобы обе анимации происходили одновременно и после окончания анимации были видны в течение 2 секунд, а затем повторялись.

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

@Composable
fun  AnimateRotatingList(
list: List,
modifier: Modifier = Modifier,
animationSpec: AnimationSpec = tween(durationMillis = 2000),
updateCurrentIndex: (Int) -> Unit,
itemContent: @Composable (item: T) -> Unit
) {
Box(modifier = modifier) {
if (list.isEmpty()) return
if (list.size == 1) {
itemContent(list.first())
return
}

var currentIndex by remember(list) { mutableIntStateOf(0) }
val current = remember(list, currentIndex) { list[currentIndex] }
val next = remember(list, currentIndex) { list[(currentIndex + 1) % list.size] }

val scale = remember(list) { Animatable(1f) }

LaunchedEffect(scale, animationSpec) {
while (true) {
delay(2000)
scale.animateTo(
targetValue = 0f,
animationSpec = animationSpec,
)
scale.snapTo(1f)
currentIndex = (currentIndex + 1) % list.size
updateCurrentIndex(currentIndex)
}
}

Box(modifier = Modifier.graphicsLayer {
scaleY = scale.value
transformOrigin = TransformOrigin(0.5f, 0f)
}) {
itemContent(current)
}

Box(modifier = Modifier.graphicsLayer {
scaleY = 1 - scale.value
transformOrigin = TransformOrigin(0.5f, 1f)
}) {
itemContent(next)
}
}
}

data class Event(
val start: String,
val end: String,
val loc: String,
val loca: String
)

@Composable
fun FollowEventCardHome() {
val eventData = listOf(
Event("A", "B", "T1", "T2"),
Event("B", "C", "T3", "T4"),
Event("C", "D", "T5", "T6"),
)

var currentIndex by remember(eventData) { mutableIntStateOf(0) }
val current = remember(eventData, currentIndex) { eventData[currentIndex] }
val next = remember(eventData, currentIndex) { eventData[(currentIndex + 1) % eventData.size] }

Column {
AnimateRotatingList(
list = eventData,
modifier = Modifier
.padding(top = 150.dp),
updateCurrentIndex = { currentIndex = it }
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 30.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
Text(
text = it.start,
fontSize = 20.sp,
)
Text(
text = it.end,
fontSize = 20.sp,
)
}
}

Spacer(modifier = Modifier.padding(20.dp))

Crossfade(targetState = currentIndex) { index ->
val currentItem = eventData[index]
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 30.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically,
) {
Text(text = current.loc)
Text(text = current.loca)
}
}
}
}

Компонуемый элемент AnimateRotatingList анимирует список событий, чередуя их каждые 2 секунды. Компонуемый объект FollowEventCardHome использует это для анимации двух строк с различной анимацией. Однако анимация второй строки начинается только после завершения анимации первой строки.
Как сделать так, чтобы обе строки анимировались одновременно с одинаковым временем и повторялись каждые 2 секунды?
Заранее благодарим за любую помощь или предложения!

Подробнее здесь: https://stackoverflow.com/questions/787 ... ck-compose