Как сохранить размер, когда к блоку применяется модификатор смещения? ⇐ Android

[Anonymous]

Моя цель — создать анимацию, в которой черный ящик перемещается горизонтально. Для этого, если я нажимаю вторую кнопку, я увеличиваю смещение (координату x), а если нажимаю первую кнопку, то возвращаюсь в исходное состояние.

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

@Composable
fun Screen() {

val offsetX = remember { Animatable(0f) }
val coroutineScope = rememberCoroutineScope()

Column(
Modifier.fillMaxSize().padding(start = 16.dp, end = 16.dp, bottom = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally
) {
Box(
modifier = Modifier
.height(40.dp)
.fillMaxWidth()
.clip(CircleShape)
.background(Color.White)
.padding(horizontal = 4.dp, vertical = 2.dp),
) {

Box(
modifier = Modifier
.size(100.dp, 40.dp)
.clip(CircleShape)
.offset(x = offsetX.value.dp)
.background(Color.Black, CircleShape)
)

Button(onClick = {
coroutineScope.launch {
offsetX.animateTo(0f, tween(400))
}
}) {
Text("reset")
}

Button(onClick = {
coroutineScope.launch {
offsetX.animateTo(80f, tween(400))
}
}) {
Text("80")
}
}
}
}

Я попытался создать анимацию перемещения поля, изменив смещение (координату x). Однако когда я увеличиваю смещение, начальная сторона перемещается, а не конечная, поэтому эффект заключается в уменьшении ширины, а не в перемещении, что я и хочу сделать.
Начальное положение черного ящика
Положение черного ящика после изменения смещения

Подробнее здесь: https://stackoverflow.com/questions/790 ... d-to-a-box