Составьте анимацию, перемещая коробку через ряд ⇐ Android

[Anonymous]

У меня есть этот дизайн, которым я пытаюсь следовать
< /p>
Когда пользователь выбирает любое текстовое поле, то есть 5 мин, 15 мин. Я пытаюсь использовать коробку (не уверен, что это лучший способ), белая коробка должна оживить эту позицию, как на изображении ниже. не могу заставить анимацию работать. /p>
Пара выпусков, которые коробка накладывает текст, поэтому не может увидеть 5 минут. И не могу заставить анимацию работать. Когда пользователь выбирает, то есть 30 минус. Я должен получить позицию положения X текста (вверху слева от композиции текста), а затем установить целевое значение в эту позицию x. А затем установите смещение коробки в эту позицию AnimatedPstate. < /P>
Это мой код до сих пор. < /P>
var selectedIndex by remember {
mutableStateOf(0)
}

val items = listOf("5 min", "15 min", "30 min", "1 hour")

val animatedOffset by animateDpAsState(
targetValue = 0.dp, // This should be the selected text position
animationSpec = tween(durationMillis = 500)
)

Box(
modifier = Modifier
.fillMaxWidth()
.height(48.dp)
.background(color = Color(0xff8138FF).copy(0.08f), RoundedCornerShape(12.dp))
.padding(4.dp),
) {

Row(
modifier = Modifier
.fillMaxSize()
.clip(
RoundedCornerShape(16.dp)
),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically

) {
items.forEachIndexed { index, item ->
Text(
fontWeight = FontWeight.W600,
fontSize = 16.sp,
text = item,
color = if (selectedIndex == index) Color.Black else Color.DarkGray,
modifier = Modifier
.clickable { selectedIndex = index }
.padding(horizontal = 16.dp)
)
}
}

Box(
modifier = Modifier
.width(100.dp) // Should be the same width as the text items
.height(48.dp)
.background(color = Color.White, RoundedCornerShape(12.dp))
.offset(x = animatedOffset, y = 0.dp),
)
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... ross-a-row